CSS : Using Classes to Further Define Styles

You can add variables to your element styles by using Class Selectors. You then use the class attribute to assign those styles to the element. There are two ways we will use classes. Regular classes define specific elements. Generic classes can be used for more than one element. You can define classes in external style sheets and in document styles.

For example - what if I wanted to be able to use more than one type of H2 tag? I could make a 2nd version that uses a class. You make a class selector by typing a period . and then adding the name (any name you chose, just not the name of a tag) you decide to call the class. I will chose the name "blu".

.blu

which I will add to the h2 tag in the style sheet

/* First I will define the h2 tag in the style sheet */

h2 { font-family: arial, helvetica, sans-serif; font-size: 20px; color: red; }

/* Now I will define a class and give the h2 a different color */

h2.blu { color: blue }

If I use the regular h2 tag it will look like this:

This is some text that is 20px, arial, helvetica or sans-serif, and red.

Your code would look like this:

<h2>This is some text that is 20px, arial, helvetica, or sans-serif, and red.</h2>

If I use the class attribute to modify the h2 tag it uses all the attributes of the first h2 style but changes the color to blue and would look like this:

This is some text that is 20px, arial, helvetica, or sans-serif, and blue.

Your code will look like this:

<h2 class="blu">This is some text that is 20px, arial, helvetica, or sans-serif, and blue.</h2>

The "blu" class can only be used with the h2 tag because that is how you set it up in the style sheets - h2.blu

Using tag specific classes is a great way to set up additional link options. You might want a different size of links for your footer. You could create a class with the anchor tag -

a.foot

a for anchor and .foot as the class. You could then define the various states of the links.

a.foot:link {color: #330066; font-size: 12px; text-decoration: underline; }

a.foot:visited {color:#00CC00}

a.foot:hover {font-weight: bold; text-decoration: none;}

a.foot:active {color: white; background: red; text-decoration: none;}

Now use the link states: Back to the splash page.