chapter 3: designing a web page with css · pdf filechapter 3: designing a web page with css...

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


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.


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;


FONT FAMILIES


EXAMPLE


<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);


EXAMPLE


<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


EXAMPLE


<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="3"> </td>

</tr>

<tr>

<th> Mon </th>




</tr>

<th> Tue </th>

<td colspan="7"> Day Off </td>

<tr>

<th> Wed </th>


<td colspan="2"> CCIT 223 </td>


</tr>

<tr>

<th> Thurs </th>

<td colspan="2"> CCIT 223 </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


Selector: pseudo-class {style} a: hover {color: blue;}Examples

PSEUDO-ELEMENTS


Selector: pseudo-element {style} p: first-letter {font-size: 30px;}Examples

chapter 3: designing a web page with css · pdf filechapter 3: designing a web page with css...

Documents