What if we only want certain H2 headings to be red, italic and arial while the rest are normal?
<html> <head> <title></title> <style type="text/css"> h2.joe { color:#ff0000; font-style:italic; font-family:arial,sans-serif; } </style> </head> <body> <h2 class="joe">Red Section 1</h2> <h2 class="joe">Red Section 2</h2> <h2>Normal Section 3</h2> <h2>Normal Section 3</h2> </body> </html>
Understand what's going on here? We have defined a class of h2 headings. Any h2 headings of class joe gets the red/italic/arial treatment. The rest are left alone.
Have a look at this...
<html>
<head>
<title></title>
<style type="text/css">
h2 { color:#000099; font-family:verdana; }
h2.joe { color:#ff0000; font-style:italic; font-family:arial,sans-serif; }
h2.eddie { color:#339933; font-family:"trebuchet ms",sans-serif; }
h2.paul { color:#FFBB00; font-style:italic; font-family:"trebuchet ms",sans-serif; }
</style>
</head>
<body>
<h2>Normal Section</h2>
<h2 class="joe">Joe Section</h2>
<h2 class="eddie">Eddie Section</h2>
<h2 class="paul">Paul Section</h2>
</body>
</html>
First we specify h2 properties in general (This is entirely optional. In the absence of a general property description, the browser will just default to it's normal presentation of that element.) Next, if we want, we can define classes to be used here and there as we wish. All we have to do is write class="whatever" within the element.
We can to this sort of thing to all elements (tags). The only thing to keep in mind that that CSS support between browsers (not to mention browser versions) can be different. As usual, check your creation through at least current versions of Netscape and Internet Explorer.
I have a couple exercises for you...
Exercise: Make a page. Using style sheets, I want you to make every bold tag that appears on the page blue and italic as well.
Exercise: Make a table like the following...
| Boys | Girls |
| Frankie | Tammy |
| Johnny | Wendy |
| Ralphie | Susie |
Using style sheets, make a class of td's that is light blue (apply to the Boy's side) and a class of td's that is pink (apply to the Girl's side). Hint: Use the background-color property instead of the color property.
Exercise: Make it so that each column's headings are slightly darker(darker blue and darker pink) than the rest of the column.
| CSS Tutor |
| Lessons: Intro 1 2 3 4 5 6 CSS Reference |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
