University Libraries, University at Albany, SUNY Need Help? Search this Site Site Index
Home Catalog Database Finder Journals

Introduction to Cascading Style Sheets
Adding a Style to a Second Tag

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:

h2 {
background-color: #FFFFFF;
font-family: Times, "Times New Roman",serif;
font-size: 24px;
font-weight: bold;
color: #ff0000;
}

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.

Your Web page should look like this when viewed in a browserThe 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.

 

 

 

 

Classes and ID

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?

NOTE: Class names must start with a dot, "." as in .BigName or .FancyScript. You can't use spaces, but you can use hyphens or underscores like this, .Big-Name or .Fancy_Script. This method of naming is incorporated into the Cascading Style Sheet, but not into the code of the Web page. Continue on with the tutorial for details.

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" />

NOTE: The HTML rules state that the ID attribute must be unique on each page. You may have an image, for instance, with id="OnRight" as the ID attribute, but there cannot be another id="OnRight" anywhere else on the page. Think of it being like an identification card, such as a driver's license. There can be only one ID card because there is only one "you!" Go to the W3C Web site for complete information, www.w3c.org.
This is actually a little snippet of code that is associated with the screen shot up above on this page. Notice the id="Linked" attribute. This means than any object, in this case the image, that has the attribute "Linked" assigned to it will be displayed in the way that the #Linked style specifies. There is a trick, of course; the ID attribute can only be used once per page!

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.

<style type="text/css">
<!--
.Names {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #333399;
background-color: #FFFFFF;
}
-->
</style>

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,

NOTE: The span tag <span></span> is very handy. It is an "empty" tag that does nothing at all until the tag has had an attribute added to it. In this case, by adding the class .Names to the span tag you will cause the text to be displayed as specified in the .Names style. You can experiment, if you wish, by applying a span tag to other text in the document. But do not use a class. When you check the file in your browser you will discover that there is no change within the empty span tag.
and add a span tag <span></span> with the class="Names" attribute. The code will look like this:

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:

 

 

 

 

 

Screen shot of the page with the Names style installed

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:

#MainTable {
color: #003300;
border: 1px solid #006666;
padding: 8px;
}

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.

Page 6

Tutorial prepared by Roger Lipera
Interactive Media Center
University Libraries, University at Albany