CSS #4 Class Selectors, Independent Classes and Pseudo-Classes

Class Selectors
With embedded and external styles you have already seen how you can give a particular selector, say the p selector specific properties and values. At this point if you wanted to override those particular values you would have to use inline styles. But there is a way to create multiple styles for the same element or the same style for multiple elements - through the use of classes.

Let say that you want to have a special format for footnotes but you still want to use the p selector (tag) for the footnote. In this case you would create a footnotes class and apply it to your p selector (tag). A special flag character is used to separate the selector from the class name. Here is how you would create the class:

p.footnote { background-color: gray }

This would apply all of the regular formatting that you assigned to the p selector but it would add the additional formating of the gray background color.

To apply the class you use the class attribute in the follwoing manner:

< p class="footnote">

Here are a couple of rules to follow with classes:
1. Don't use numbers in your class names
2. Only one class is allowed per selector (you CANNOT do this:< p class="footnote.title">

Independent Classes
Suppose you want to create a style that could be used with several different selectors, if that is the case then you would create an independent class. The format is the same as the class selector but you do not include a selector. Let's say you want a style that centers the text and makes it lightblue in color. Here is how you would create this independent class:

.myclass { text-align: center; color: lightblue }

To apply this class you would follow the same rules that you used with the class selector in the previous example:

< p class="myclass"> but since this is an idependent class it can be applied to ANY selector
<div class="myclass> or <h1 class="myclass"> or <td class="myclass">.

Pseudo-Classes
Pseudo-classes use a selector followed by a colon (:) and a pre-determined pseudo-class name. They are case-sensitive. Examples are shown below.

Pseudo-Class	What it does	Examples to code in the HEAD section
:hover	Changes the element when the mouse is over it.	A:hover {color: #0000FF;}
:active	Changes the element when the mouse is clicked.	A:active {color: #FF0000;}
:focus	Changes the element when the element is ready for keyboard input.	A:focus {color: #000000;}
:link	Changes the appearance of a link.	A:link {color: #0000FF;}
:visited	Changes the appearance of a visited link.	A:visited {color: #FF0000;}

Class Exercises
Open your css2yourname file that you created in exercise two. You already have embedded styles in this page so now you will add a special td class that changes the font-size and background color.

1. Use the example given in this page to create a td.heading class that makes the font-size large and the background silver. Apply this class to the first td tag

2. Make another td class called td.vertical and make the background black, the font color white and the font-size large. Apply this to the second td tag.

3. Create another td class called td.rows and make the background color steelblue and the text white. Apply this class to the other three td tags.

Show your page and code to your instructor for teacher check.

Independent Classes
Open the independentclass page and save it in your css folder.

1. Create an independent class called text that uses a font of sans-serif, the color is navy and the size is 10pt. Apply this class to the blockquote, ul and p elements on this page.

2. Create another independent class called heading and make the font impact, the color darkblue and the text size large. Apply this class to the h3 and h2 elements.

3. How does the text size of the h3 and h2 elements compare now? Why? Which one would normally be larger?

4. Show this page and your code to your instructor for teacher check.