Page 131 - DCAP408_WEB_PROGRAMMING

Unit 4: Cascading Style Sheets

Notes

Task Substantiate the primary difference between the <span> and <div> tags.

Self Assessment

Fill in the blanks:

15. The ………………….. tag is used to define style information for an HTML document.
16. Use <span> when you want to change the style of elements without placing them in a new
………………….. element in the document.

4.10 Creating and Using CSS Classes

Using classes with your CSS can make customizing your pages ten times easier, because you can
give different occurances of the same element different styles.
Say you wanted every cell of a table to have a different color and font, like this:
pink green
yellow blue

Instead of defining everything with HTML, we use CSS classes. Here is the code:
<table border=”1"><tr>
<td class=”pink”>pink</td>
<td class=”green”>green</td>
</tr><tr>
<td class=”yellow”>yellow</td>
<td class=”blue”>blue</td>
</tr></table>
Then, in your header, you’d define what happens with each different class, like so:
<style type=”text/css”><!—
.pink {FONT-FAMILY: Times New Roman, Times; BACKGROUND: #FFCCFF}
.green {FONT-FAMILY: Courier New, Courier; BACKGROUND: #33FFCC}
.blue {FONT-FAMILY: Verdana; BACKGROUND: #00CCFF}
.yellow {FONT-FAMILY: Arial, Helvetica; BACKGROUND: #FFFF66}
—></style>

Notes Now everything you add class=”pink” to will have a pink background color and
Times New Roman font.

This can also be useful if you want different links to look different ways. For example, links in
the menu to look one way, and links in the body/text to be different. In the style sheet of your
page you’d usually have this:
a:active {color:pink}
a:visited {color:pink}

LOVELY PROFESSIONAL UNIVERSITY 125