HTML: Style Sheets (Part 3)

 

Classes

In Part 2 we modified the <H3> tag using a style sheet to have it appear the way we wanted it to appear. But what if you want to use the <H3> tag in different situations and have it appear differently in those situations? You can use classes to create different versions of the <H3> tag.

Let's set up <H3> tags that differ in color and in text-indent. After the <H3> tag, put a "." and then the name of the class you are defining. Here is how you might set it up:

<style>

h3 { font-size:14pt; font-family:Verdana,Arial,Helvetica,sans-serif; text-indent:0em; color:#99FFFF }

h3.indent { font-size:14pt; font-family:Verdana,Arial,Helvetica,sans-serif; text-indent:1em; color:#0099FF }

h3.doubleindent { font-size:14pt; font-family:Verdana,Arial,Helvetica,sans-serif; text-indent:2em; color:#3333FF }

h3.tripleindent { font-size:14pt; font-family:Verdana,Arial,Helvetica,sans-serif; text-indent:3em; color:#003399 }

</style></head>

Then to use a class, include the class= attribute in the tag:

<BODY>

<h3>Row row row your boat</h3>

<h3 class=indent>Gently down the stream</h3>

<h3 class=doubleindent>Merrily merrily merrily merrily</h3>

<h3 class=tripleindent>Life is but a dream.</h3>

to see this how this code looks in a window.

 

A Class for Every Tag

The classes 'indent,' 'doubleindent' and 'tripleindent' defined above are available only to the <H3> tag. Let's say we want to create a class that is available for use by any tag, and we want the class to eliminate the margin above and below the text, and to have blue text. Here's how a definition of the class "code" might look:

<style>

.code { font-family:Courier,sans-serif; font-size:10pt; margin-top:0em; margin-bottom:0em; color:blue; }

</style>

 

Here is an application of this class to some C++ code:

 

<p class=code>int i;<br>

for (i=0; i<LIMIT; i++)<br>

{ cout << "Hello, world!" << endl;<br>

}</p>

 

Note that, in the style definition, the name of the class is preceded by a ".".

to see this how this code looks in a window.

 

What Happens Now?

What happens if a tag tries to use a class that is not available to it? For example, what happens if a <P> tag tries to use the 'tripleindent' class defined above?

Also, what happens if a tag that already has a lot of formatting also uses a class like the code class defined above? Specifically, what happens if a <H1> tag uses the 'code' class?

Here are 3 examples:

<BODY>

<p class=tripleindent>This is text inside the tag <P class=tripleindent> but notice that it's not in the 'tripleindent' format. Why not? The tripleindent format is only available to <H3> tags.</p>

<h3 class=tripleindent>This is text inside the tag <H3 class=tripleindent> and notice that it IS in the tripleindent format. That's because the tripleindent format is available to <H3> tags.</h3>

<h1 class=code>What happens when text is inside the tag <H1 class=code>? It appears that some properties of the <H1> tag still hold, for example this text is bold, which is not part of the .code style. Other properties of <H1> are over-ruled by the .code style, which specifies that the top and bottom margins are 0 and the font-size is only 10 em.</h1>

to see what happens.

 

Other Resources

Try these links on style sheets:

Page Link
CSS Properties www.htmlhelp.com/reference/css/properties.html
CSS Structure and Rules www.htmlhelp.com/reference/css/structure.html
Style Guide www.w3.org/MarkUp/Guide/Style.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com website. Choose a color to work with. Use classes to set up 4 different <H3> tags. The first <H3> tag should be in a light version of the color you chose. The second <H3> tag should appear in a somewhat darker version of the color. The third <H3> tag should be darker still, and the fourth <H3> tag should be the darkest.

Set up a class that would be available to all tags that has a text color of #FF00FF, a font-size of 12pt, a margin of 2em to the left and a margin of 2em to the right.

Use each of these styles at some point on your web page.

If you're working on the eEverything.com site, you might want to copy this text and apply the styles to it:

Tired of tearing your hair out in the morning looking for something that you know is in your closet somewhere? This is the time to look into organizing your closet with some Spiffo shelves, Spiffo shoe racks, Spiffo cubes and Spiffo dividers. Spiffo makes everything you need to put together a tidy, organized closet where you can always find what you need. This is the time because Spiffo closet organizers are now 20% off as part of the Huge Clearance Sale in honor of National Teachers Minute. Click here to jump to the Spiffo section of eEverything.com.