Lessons
Lesson 5: Working with classes
... You've learned about Font Tester's five core text properties: font-size, font-family, color, background-color, and text-align. Now you'll generate the CSS and HTML code for the choices you made and place the code into a text editor so you can learn about CSS classes.
Select the CSS code, copy it, and paste it into a text editor in its Head section between the <style> and </style> tags, as I've done below.
Did you notice the error in the above CSS code? If not, take another look at it.
There should be a pound sign (#) before background-color's hexadecimal value.
Select and copy your HTML code, and paste that onto the page that contains your CSS code, but paste the HTML code in the Body section between the <body> and </body> tags. Here's how mine looks:
Introduction to CSS classes
In the above HTML code, on the line after <body> is this code:
p class="example".
The "p" selector refers to the HTML paragraph tag. The word "class" after it indicates that a CSS class called "example" is modifying the p selector like an adjective modifies a noun.
To find out how the class "example" is modifying the p selector, you need to refer to the CSS code that's above the HTML code. There, you'll see "p.example". The dot before the "e" in "example" indicates that example is a class, one that only affects paragraphs. If you wanted the class "example" to be available to affect any HTML tag to which it could apply, you would specify it as ".example" without anything before it.
The p.example's code that's between the braces forms its declaration set. It reveals how the class "example" will modify paragraphs to which it is attached, as it is in this HTML: p class="example".
If you did not want a paragraph on your Web page to be affected by the "example" class, you would write its HTML this way:
<p>This is a paragraph whose text will not be affected by the class "example".</p>
If you had specified your CSS code the way it's done below, you could apply the "example" class to any text-based page element, including headers and list items :
.example {
font-size:120%;
font-family:Verdana,Geneva,sans-serif;
color:#f00;
background-color:#ffff00;
text-align:left;
}
Practice
In your text editor, in your Web page's Body section, add an H3 tag and apply the class "example" to it.