065 Web Site Templates from Webmasters Profit Pak

Now you know how to make all paragraphs green or all level 1 headings bold. But suppose you only want some paragraphs to be green, or some level 1 headings to be bold? This is done by creating and using "classes" of styles and using the CLASS= attribute to apply that style to an HTML element. All elements in the BODY of the HTML document can use the CLASS= attribute. Classes establish grouping schemes for identifying HTML tags within a Style Sheet. Different HTML tag types can share the same Class Name value - this allows an entire class to be identified by a common label.

When applying a class to a specific element, a period (".") is used to separate the HTML element name from the class name (e.g., body.blackback in the example below). To create a class which could apply to any appropriate tag, use only the class name with a leading period as a selector (e.g., .center in the example below) .

body    {font-family:   arial, helvetica, sans-serif;
        color:          #000000;
        background:     #ffffcc;
        }
body.blackback
        {font-family:   arial, helvetica, sans-serif;
        color:          #ffcc33;
        background:     #000000;
        }
.center
        {text-align:    center;}

Pseudo Classes

CSS1 defines five pseudo-classes that you can use to define styles for specific types of elements in your pages.

A:link - unvisited links
A:active -  active links
A:visited - visited links
P:first-line - first line of a paragraph
P:first-letter - first letter of a paragraph

A pseudo-class can be recognized by the colon separating the selector (HTML tag) and the "special" quality of that selector (for instance, A:link is used to define a style for the anchor tag for "unvisited links"). So, to make unvisited links red, visited links blue, and active links green, you would write the following styles:

A:link { color: red; }
A:visited { color: blue; }
A:active { color: green; }

A commonly asked question is "How can I turn link underlining off?" Before you do, be sure that there are other cues to let the reader know that there are clickable links there, e.g., they are in an area that is clearly a navigation menu. To make changes, selectively to the anchor tag, a special class called the pseudo-class is used. A style sheet that turns off the text underlining for the anchor tag is displayed in the box below:

This style rule turns off link underlining for ALL anchor tags:

A { text-decoration: none; }

These style rules set up classes for turning off link underlining selectively:

A.nound { text-decoration: none; }

The HTML encoding using the special class would look like this:

<A CLASS="nound" HREF="index.html">

Affordable Web Site Templates, Software, and Scripts. Templates Like This at Webmasters Profit Pak

Using Web Templates for Web Design: Tips and Best Practices--Style Sheets

The CLASS Attribute - Selector Classes

Pseudo Classes