Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
CSS Class Names
Nope, I’m not trying to enroll you in a class . . . CSS allows you to create your own “class” of elements. What that means is that you can create several styles for the same element. By coding a class name into the element for the style you want it to have, an element can have several different looks on the same page.
For example, if I wanted to create some paragraphs of text in blue, some in red, and some in green, I could do so by creating a class for each desired style. Here’s how those three classes would be created in an external style sheet:
p.blue {color: blue;}
p.green {color: green;}
By placing a period after the CSS p selector (the HTML paragraph element), and then adding a name immediately after the period (use no space), I’ve created three different style rules for paragraphs.
The way to call these styles into action is by adding the class you want to use in a paragraph tag. Here’s an example:
By adding a space after the paragraph element and then adding class="red" to the tag, the browser will use the red paragraph class found in my style sheet.
By using the name of the class as the value of the HTML class attribute with the element, the browser will use the rules you created for that class. If I wanted the next paragraph in blue text I’d just cancel the first paragraph and start a new one, only this time I’d add the class of blue to the <p> tag.
Just because I named the class for red text as red, it doesn’t mean I had to name it that way. I could have named the red class blue if I wanted to, or SillyWiggles or Fred—almost anything I want. As I always say though, it’s easier to keep track of things if you use sensible naming conventions.
A class can have any name you want to give it as long as it adheres to these rules.
- The first character of a class name cannot be a number, it must be a letter.
- There can be no spaces in the class name. I use a hypen instead of a space when I have a class that is two words.
- Class names are case sensitive, so a class named red is not the same as a class named Red.
To be compatible with older browsers, however, you shouldn’t name any class with a name that matches JavaScript keywords. For example, you might want to use “default” as a class name to define your normal page text, but that will generate an error in some older browsers. It’s not near the problem it used to be, but still, better safe than sorry. Here are the words you shouldn’t use in naming your CSS classes:
You probably won’t need that list often, but it’s the first thing to check if you name a class that generates an error message in older browsers.
That’s all there is to creating a CSS class, so, uh…
…class dismissed! 
