CHAPTER 3: DESIGNING A WEB PAGE WITH CSS
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
OVERVIEW
Applying Style to Elements Based on ID and Class
Styling Web Page Text
Styling Lists
Styling Tables
Styling Forms
Psuedo Classes and Elements
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
APPLYING STYLE TO ELEMENTS BASED ON ID OR CLASS
To apply a style to an element based on its id, you use the selector #id.
A style rule involving an id selector has precedence over any rule except those defined within an inline style.
To apply a style to an element based on its class, you use the selector .class.
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
html: <element id=“id” class=“class”>
CSS: #id {style;}
.class {style;}
html: <p id=“main” class=“navigation”>
CSS: #main {color:red;}
.navigation{text-align: center}
Examples
STYLING WEB PAGE TEXTProperty Value Example
font-family Geneva, serif, cursive, fantasy, Helvetica, sans-
serif, Times New Roman…..etc
font-family: "Times New Roman",
Times, serif;
font-size in, pt, px, em font-size: 20px;
letter-spacing letter-spacing: 5px;
word-spacing word-spacing: 12px;
line-height line-height: 20px;
font-style normal, italic font-style: italic;
font-weight normal, bold font-weight: bold;
text-decoration none, underline, overline, line-through text-decoration: underline;
text-transform Capitalize, UPPERCASE, lowercase, none text-transform: uppercase;
text-align left, right, center, justify text-align: right;
vertical-align bottom, middle, top vertical-align: top;
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
EXAMPLE
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<html>
<head>
<link href=“myStyle.css” rel="stylesheet" type="text/css“/>
</head>
<body>
<h1>
Things I do in my Free Time
</h1>
<p>
There are many things that I do in my free time,
among them are the following: reading, watching TV,
and going out with friends.
</p>
<h1>
Favorite Foods
</h1>
</body>
</html>
h1 {
color: white;
background-color: gray;
font-family: "Comics Sans ms";
font-size: 20px;
text-transform: uppercase;
text-align: center;
}
p, ol, ul {
color: black;
background-color: beige;
font-family: "Arial";
font-size: 14px;
text-align: left;
}
STYLING LISTS Property Value Example
list-style-type square, disk, circle, decimal....etc list-style-type: square;
list-style-image url(picName) list-style-image: url(arrow.png);
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
EXAMPLE
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<ol>
<li>
Pasta
</li>
<li>
Chicken wings
</li>
</ol>
<h1> Places I want to travel to</h1>
<ul>
<li>
Spain
</li>
<li>
Maldives
</li>
</ul>
ol {
list-style-type: upper-alpha;
}
ul {
list-style-type: square;
}
STYLING TABLESProperty Value Example
border (table and cells) px style color border: 10px solid gray;
border-collapse separate or collapse border-collapse: collapse;
border-spacing px
width px
height px
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
EXAMPLE
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
<table>
<tr>
<th> 8:00-9:00 </th>
<th> 9:00-10:00 </th>
<th> 10:00-11:00 </th>
<th> 11:00-12:00 </th>
<th> 12:30-1:30 </th>
<th> 1:30-2:30 </th>
<th> 2:30-3:30 </th>
<th> 3:30-4:30 </th>
</tr>
<tr>
<th> Sun </th>
<td colspan="2"> CCSA 127 </td>
<td colspan="2"> CCSA 127 </td>
<td colspan="3"> </td>
</tr>
<tr>
<th> Mon </th>
<td colspan="2"> CCSA 127 </td>
<td colspan="2"> CCSA 127 </td>
<td colspan="3"> </td>
</tr>
<th> Tue </th>
<td colspan="7"> Day Off </td>
<tr>
<th> Wed </th>
<td colspan="2"> CCSA 127 </td>
<td colspan="2"> CCIT 223 </td>
<td colspan="3"> </td>
</tr>
<tr>
<th> Thurs </th>
<td colspan="2"> CCIT 223 </td>
<td colspan="2"> CCSA 127 </td>
<td colspan="3"> </td>
</tr>
</table>
table {
border: 10px double red;
border-collapse: collapse;
width: 400px;
height: 200px;
}
th,
td {
border: 2px solid black;
}
th {
background-color: rgb(173, 216, 230);
}
PSEUDO-CLASSES
CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
Selector: pseudo-class {style} a: hover {color: blue;}Examples