Remember my faq page which contained several questions and answers? Lets create an <H3> tag which formats the questions and another <H3> tag which formats the answers.
1. If I want these classes to apply to just the faq page I will embed them into the head of the file as document level styles. I create a new file called "faq-css.html" and enter this code:
<HTML><HEAD>
<style>
<!-- H3.q {color:#990033}-->
<!-- H3.a {color:#000099}-->
</style>
<TITLE>CSS Class Style Test</TITLE>
</HEAD><BODY bgcolor="ffffff"><br /> <br />
2. I now have 2 sets of styles for the <H3> tag. How can I determine when each style is used? Well in the body of the document I declare the h3 tag and then insert the attribute class and assign a value of either "q" or "a" ? Insert this code:
<font size=5>I have 2 classes of the H3 tag, H3 now has a split personality :-> <br /> <br />
<H3 class="q">I am an example of a question that is formatted using an H3 tag, the attribute class, and a value of q </H3>
<H3 class="a">I am an example of an answer that is formatted using an H3 tag, the attribute class, and a value of a </H3>
<H3 class="q">I am an example of a question that is formatted using an H3 tag, the attribute class, and a value of q </H3>
<H3 class="a">I am an example of an answer that is formatted using an H3 tag, the attribute class, and a value of a </H3>
<H3 class="q">I am an example of a question that is formatted using an H3 tag, the attribute class, and a value of q </H3>
<H3 class="a">I am an example of an answer that is formatted using an H3 tag, the attribute class, and a value of a </H3>
</BODY> </HTML>
3. Save the file and view it in the browser. When the browser encounters the h3 tag and the attribute class it will search for either a linked style sheet or in this case a document level style that contains a class of "q" or "a". If the browser cannot find a class of "q" or "a", it just skips the "class" attribute and treats it as a traditional <H3> tag.
As I view the page I see that the H3 headings with the class "q" appear in maroon and the H3 headings with class "a" appear in Navy blue.
Here is an example of how the page should display
FAQ page with 2 styles assigned to H3 tag
| home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates |