Lab 03 (Cascading Style sheet)

Online Ticketing System with CSS


Cascading: Multiple style can overlap in order to specify a range of style form a whole web site down to a unique elements. Which style gets applied pertains to the rules of CSS cascading logic.

Style: CSS deals specifically with the presentation domain of designing a web page (color, font, layout, etc).

Sheet: Normally, CSS is file separate from the HTML file - linked to the HTML file through its <head> (exceptions apply).


<html>
<head>
<title>WWW Programing </title>

<link rel="stylesheet" href="s238853jamilin.css">     (css extension link in html)
</head>

<html>
<body style="background-color:powderblue;">
<p align="center">
   <img src="malindologo.png" width="800" height="200">
</p>
</body>
</html>


<body>

<h1>Airline Ticketing Login</h1>


<form action="insert.asp" method="post">

User ID: <INPUT type="text" name="User ID" size=30 maxlength=40>

My Password: <INPUT type="password" name="pwd" maxlength=15>

<head>
<title>Radio Buttons</title>
</head>
<hr>

<body>
<h1>Choose your Flight</h1>

<form action="insert.asp" method="post">

<P> Select yout type  of flight:<BR>

<INPUT type="radio" name="os" value="mac">Oneway
<INPUT type="radio" name="os" value="dos">Return<BR>
<hr>
</P>


<h1><center>Flight Details</h1><center>
<br>
<left><INPUT type="submit" value="Check Out"><BR><left>

<table border=4px solid Red  align="center" width="100%"
<tr>
<td><b><center>Departing</b></td><center>
<td><b> <center>Arrival</b></td><center>
<td><b> <center>Passenger</b></td><center>
<td><b> <center>Date</b></td><center>
</tr>
<td><center>
<form action="insert.asp" method="post">
<P> Select your city
<SELECT name="access">
<OPTION>Alor Setar (AOR)
<OPTION>Ipoh (IPH)
<OPTION>Johor Bahru (JHB)
<OPTION>Kota Kinabalu (BKI)
<OPTION>Kerteh (KTE)
<OPTION>Kuching (KCH)
<OPTION>Hong Kong (HKG)
<OPTION>Perth (PER)
<OPTION>Brisbane (BNE)
<OPTION>Dhaka (DAC)
<OPTION>Aambon (AMQ)
<OPTION>Bandung (BDO)
<OPTION>Yangon (RGN)
<OPTION>Katmandhu (KTM)
<OPTION>Jeddah (JED)
</SELECT>
</td><center>

<td><center>
<form action="insert.asp" method="post">
<P> Select your city
<SELECT name="access">
<OPTION>Alor Setar (AOR)
<OPTION>Ipoh (IPH)
<OPTION>Johor Bahru (JHB)
<OPTION>Kota Kinabalu (BKI)
<OPTION>Kerteh (KTE)
<OPTION>Kuching (KCH)
<OPTION>Hong Kong (HKG)
<OPTION>Perth (PER)
<OPTION>Brisbane (BNE)
<OPTION>Dhaka (DAC)
<OPTION>Aambon (AMQ)
<OPTION>Bandung (BDO)
<OPTION>Yangon (RGN)
<OPTION>Katmandhu (KTM)
<OPTION>Jeddah (JED)
</SELECT>
</P></td><center>

</br>

<td><center>
<form action="insert.asp" method="post">
<P> Adult
<SELECT name="access">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT><BR>

<form action="insert.asp" method="post">
<P> Children
<SELECT name="access">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT><BR>

<form action="insert.asp" method="post">
<P> Senior Citizen
<SELECT name="access">
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT><BR>


</P></td><center>

<td><center>
<form action="insert.asp" method="post">
<P> Year
<SELECT name="access">
<OPTION>2017
<OPTION>2018
<OPTION>2019
<OPTION>2020
<OPTION>2021
<OPTION>2022
</SELECT><BR>

<form action="insert.asp" method="post">
<P> Month
<SELECT name="access">
<OPTION>January
<OPTION>February
<OPTION>March
<OPTION>April
<OPTION>May
<OPTION>June
<OPTION>July
<OPTION>August
<OPTION>September
<OPTION>October
<OPTION>November
<OPTION>Disember
</SELECT><BR>

<form action="insert.asp" method="post">
<P> Days
<SELECT name="access">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
<OPTION>11
<OPTION>12
<OPTION>13
<OPTION>14
<OPTION>15
<OPTION>16
<OPTION>17
<OPTION>18
<OPTION>19
<OPTION>20
<OPTION>21
<OPTION>22
<OPTION>23
<OPTION>24
<OPTION>25
<OPTION>26
<OPTION>27
<OPTION>28
<OPTION>29
<OPTION>30
<OPTION>31
</SELECT><BR>
</P></td><center> <BR>

</tr></td></b></table></body></center>

<body> <h3>Need Help? Email Us<h3>
<form action="insert.asp" method="post">
Your thought:<BR>
<TEXTAREA name="comments" row=5 cols=65></TEXTAREA>

<form action="insert.asp" method="post">
<INPUT type="submit" value="Send">


</form>
</html>


Before CSS



After CSS


Comments