Adding a second style to a style sheet is even easier that than the first one because the basic set up work for the style sheet has already been done.
Go back to NotePad so you can work on your code again.
Add this snippet of code to the style sheet in the head of your document:
font-family: Times, "Times New Roman",serif;
You can see the entire code for the page by clicking here, a new window will open.
Save the file as you did before and view it in your browser.
The image on the right shows how your page should look when viewed in the Netscape 7.2 browser. It should look nearly identical in Internet Explorer, Foxfire, and Opera.
If you would like to see the page as it should appear "live" in your browser, click here and it will open in a new window. If your page matches the one that opens in the new window, you have done it correctly. If it doesn't match there may be an error in the code. Simply go back and check the code. Then save the file and view it again.
The problem with defining a standard HTML tag, such as the h1 and h2 tags you have styled so far, is that the style applies to all instances of that tag. No matter where the h1 tag appears on a page, or on any other page that is linked to the Cascading Style Sheet, it will be presented as specified in the style. What happens when you need to have only certain instances of an HTML tag styled and not others?
The problem is solved using a type of style definition called a "class." Classes are specific styles that are given unique names. A class can be then applied to any HTML tag. As an example, it is possible to create a class with the name ".BigName" that features red text displayed in bold. Any HTML tag to which the class .BigName is applied will cause the associated text to be red and bold.
How does this work? It works very well, actually. Just to make things easier, you can name a class almost anything you want. This is especially useful because then the class name can be used to jog your memory. You cannot name a class using a standard HTML tag, such as "table," but you can call it ".SpecialTable" or ".LeftTable."
The ID attribute is a little more complicated. ID's are often part of certain elements of a Web page, such as images. Here's an example:
<img src="images/example1c.gif" alt="Your page should look like this when viewed in a browser" name="Linked" width="300" height="215" border="1" id="Linked" />
Now you will discover how classes and the ID attribute work.
Open a new document in NotePad and paste in the code that you find by clicking here. The file will open in a new window.
Now save the document with the name princess.htm.
Add this snippet of code into the head portion of your document.
font-family: Arial, Helvetica, sans-serif;
You can check the code for the entire page by clicking here. The file will open in a new window.
Save the page.
Now you have a Web page with an embedded Cascading Style Sheet.
Find the following piece of text:
The princess's name was Gwendoline,
The princess's name was <span class="Names">Gwendoline</span>
Save the file and view it with your browser. You will see that the name "Gwendoline" is presented in dark blue and bold.
Continue on and add the span tag with the class="Names" attribute to other names in the file. You will find these other names:
Save the file and view it with your browser. The screen shot on the right illustrates how the page should look when viewed with Netscape 7.2. If you would like to see how our version of the page looks "live," click here. The page will open in a new window.
Notice that only the text inside the span tags has been styled. All the other text has been left alone.
Now let's see how the ID attribute works. Return to the file in NotePad.
Notice that in the opening half of the table tag there is an ID attribute. That code snippet is below:
<table width="90%" border="0" cellpadding="0" cellspacing="0" id="MainTable">
Add this style to the Cascading Style Sheet in the head of your document:
border: 1px solid #006666;
The "number sign" (#) before the name of the style indicates that it is for an ID attribute. It will only work on the object that has the id="MainTable" assigned to it. If you would like to see the entire code for the page, click here, and it will open in a new window.
Save and test your document. When you view it in a browser you will see that the text is now green and there is a border that is also green. Between the text and the border is is an 8 pixel wide space that is defined by the padding: 8px; portion of the style. Padding is the space between and object (in this case it is the text) and the object (such as a table cell) that contains it.
You can see the finished page by clicking here and it will open in a new window. Remember, if your page matches the one that opens in the new window, you have done it correctly. If it doesn't match there may be an error in the code. Simply go back and check the code. Then save the file and view it again.
The next step is to understand inheritance and the cascade.