Web Design - Web Authoring / Intro to CSS: Class Selectors
Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3
Section Two:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H  |  Part I

Using the Class Selector

Now that we have created our two class selector rules for the Wilson HS Football team it is time to deploy them – or put them into action.

What is Meant by "Class" Selectors?

The reason class selector rules are called “Class” selector rules is that in order for them to work they must be added to an HTML tag as the value in the class="" attribute.

Let’s say that you decide to list several Wilson High School football player’s stats in a paragraph and create line breaks within the paragraph text using <br> tags. In the example code below, five football players have been listed between the <p></p> tags and each player is listed on separate lines thanks to the inclusion of the <br> tag.

attribute example

Now refer back to the Class Selectors created:

attribute example

To deploy the .statSize class selector you created – formatting your stat text using a slightly larger font size – you must add the class="" attribute to the tag you want to apply the class selector rule to; in this case the <p> tag.

The value of the class="" attribute, or what is listed between the quotation marks, is the class selector name minus the period [ . ] The period [ . ] is only required when creating the rule as it specifies the the type of selector rule that is being created. Let's see it in action.

Next Next

© 2008 KCDL. All rights reserved.