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

Understanding Class Selectors The Anatomy of a Class Selector The example image below displays the type selector code that was used in a previous example. Note that the selector itself is simply: h1 which correlates the to <h1> HTML tag. A class selector differs from a type selector in that it first begins with a period [ . ] immediately followed by a class selector name (a word or words listed one after the other without a space between). Class Selector Names Creating appropriately formatted class selector names is very important. If you fail to create your class selector names using the appropriate naming protocols, the formatting changes expected from the class selectors you created will not be visible in your web page. The naming protocols of class selector names are listed below: Class selector names must start with a period [ . ]. Class selector names can be a combination of letters and numbers. Class selector names CANNOT start with a number. Class selector names can have multiple words in the name. Class selector names CANNOT have spaces in between words. Words need to be butted right up next to each other with no space in between. Class selector names should be descriptive so as to explain what the rule is expected to do. See the table below for class selector names that have been formatted correctly and those that have been formatted incorrectly. The far right column explains what’s wrong with the incorrect class selector name. Next

© 2008 KCDL. All rights reserved.