Lab 03 ( Cascading Style Sheet)

Cascading - Multiple styles can overlap in order to specify a range of style from a whole web site down to a unique element. 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 a file separate from the HTML file - linked to the HTML file through its <head> (exceptions apply). 

<html>
<head>
<title> LAB03s238809 </title>

<link rel="stylesheet" href="s238809shahira.css"> (css extension link in html)

</head>
<html>
<body style="background-color:lightgray;">
 
<p align="center">
<img src="AirAsia.jpg"width="300"height="300">

<table border="1"align="center"width="40%"
<tr>
<td><b><h3><center>Now everyone can fly. Come and book your ticket now!</h3>

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


<h3>-MEMBER LOGIN-</h3>
<form action="insert.asp"method="post">

My Name: <INPUT type="text"name="myname" size=30 maxlength=20>
</form>


Password: <INPUT type="password"name="pwd" size=15 maxlength=15>
</form>
<hr>

<head>
<title>Radio Button</title>
</head>

<h2>Search Flight</h2>

<form action="insert.asp"method="post">
<P>
<INPUT type="radio"name="os"value="One Way">One Way<BR>
<INPUT type="radio"name="os"value="Return">Return<BR>
</P>
</form>

<head>
<title>Select</title>
</head>

<h2>Select your destination</h2>

<form action="insert.asp"method="post">
<P>Departure
<SELECT name="destination">
<OPTION>Please select your destination
<OPTION>Alor Setar (AOR)
<OPTION>Bintulu (BTU)
<OPTION>Johor Bharu (JHB)
<OPTION>Kota Bharu (KBR)
<OPTION>Kota Kinabalu (KBI)
<OPTION>Kuala Lumpur (KUL)
<OPTION>Kuala Terengganu (TGG)
<OPTION>Kuching (KCH)
<OPTION>Labuan (LBU)
<OPTION>Langkawi (LGK)
<OPTION>Miri (MYY)
<OPTION>Penang (PEN)
<OPTION>Sandakan (SDK)
<OPTION>Sibu (SBW)
<OPTION>Tawau (TWU)
</SELECT>
</P>
</form>

<head>
<title>Select</title>
</head>

<form action="insert.asp"method="post">
<P>Ariving
<SELECT name="destination">
<OPTION>Please select your destination
<OPTION>Alor Setar (AOR)
<OPTION>Bintulu (BTU)
<OPTION>Johor Bharu (JHB)
<OPTION>Kota Bharu (KBR)
<OPTION>Kota KInabalu (KBI)
<OPTION>Kuala Lumpur (KUL)
<OPTION>Kuala Terengganu (TGG)
<OPTION>Kuching (KCH)
<OPTION>Labuan (LBU)
<OPTION>Langkawi (LGK)
<OPTION>Miri (MYY)
<OPTION>Penang (PEN)
<OPTION>Sandakan (SDK)
<OPTION>Sibu (SBW)
<OPTION>Tawau (TWU)

</SELECT>
</P>
</form>

<head>
<title>Select</title>
</head>

<h2>Select your date</h2>

<form action="insert.asp"method="post">
<P>Day
<SELECT name="Day">
<OPTION>Please select your day
<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>
</P>
</form>

<head>
<title>Select</title>
</head>

<form action="insert.asp"method="post">
<P>Month
<SELECT name="Month">
<OPTION>Please select your month
<OPTION>Januari (JAN) 
<OPTION>Februari (FEB)
<OPTION>March (MAR)
<OPTION>April (APR)
<OPTION>May (MAY)
<OPTION>June (JUN)
<OPTION>July (JUL)
<OPTION>August (AUG)
<OPTION>September (SEPT)
<OPTION>October (OCT)
<OPTION>November (NOV)
<OPTION>December (DIS) 
</SELECT>
</P>
</form>

<head>
<title>Select</title>
</head>

<form action="insert.asp"method="post">
<P>Year
<SELECT name="Year">
<OPTION>Please select your year
<OPTION>2017
<OPTION>2018
<OPTION>2019
<OPTION>2020
<OPTION>2021
<OPTION>2022
<OPTION>2023
<OPTION>2024
<OPTION>2025
<OPTION>2026
<OPTION>2027
<OPTION>2028
</SELECT>
</P>
</form>

<h2>Passenger</h2>
<style>
table, th, td {
    border: 2px solid red;
}
</style>
<table style="width:100%">

  <tr>
    <th>Children</th>
    <th>Adult</th> 
    <th>Senior Citizen</th>
  </tr>
<td>
<head>
<title>Select</title>
</head>

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

<td>
<head>
<title>Select</title>
</head>

<form action="insert.asp"method="post">
<P>Adult
<SELECT name="adult">
<OPTION>Please select number 
<OPTION>0
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
</SELECT>
</P>
</form>

<td>
<head>
<title>Select</title>
</head>

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

</td></tr></table>
<br>
<form action="insert.asp"method="post">
<INPUT type="submit"value="Check Out">
<hr>

<h2>Need help? Email us</h2>

<form action="insert.asp"method="post">
Your Comment:<BR>
<TEXTAREA name="write your comments" rows=4 cols=65>
</TEXTAREA>

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

</form></html></body>


before css

after css 

Comments