A Smarter Way To Learn HTML & CSS(2015)

7
CSS classes

You’ve specified a font family and a font size for paragraphs and h1 headings. You can also create classes of paragraphs and headings with formatting that varies from general styling for paragraphs and headings. In fact, you can create classes of just about any element on the page for custom formatting. Open your styles.css file and add this style...

p.important {
font-size: 1.5em;
}

Save your CSS file. Now you’ve created special styling for a class of paragraphs. This special style named “important” will override the general style that you created earlier. When you say you want text in paragraphs of the class “important” to have a font-size of 1.5em, you’re saying you want the text to be one-and-a-half times normal size. But what is normal size? It depends on whether you’ve created a general style in your CSS file that applies to the whole page (See Chapter 19). If you haven’t created a general paragraph style, normal size is the browser default size—1em. So then a 1.5em font-size for the paragraph class “important” would be one-and-a-half times the browser default size. The rules for naming classes would fill a book. To keep things simple, I’m going to ask you to use lowercase alphabet letters, hyphens, underlines, and numbers. But don’t start a name with a number. Here’s an example of a class for h3 headings.

h3.bigger {
font-size: 2.5em;
}

This class will be 250% of the size of normal text. Again, “normal” means 250% of the size of the browser default text size if you haven’t specified a style for the whole page. If you have styled h3 headings, the “bigger” class of headings will be 250% of that size. Save your CSS file. Open your HTML file and add this line...

<p class="important">Warning: We have no slow lorises here.</p>

Now the text “Warning: We have no slow lorises here.” will be one-and-a-half times “normal” text size. Things to notice:

· The class reference is part of the opening p tag, all enclosed in brackets.

· The class name is enclosed in quotation marks.

· The closing paragraph tag doesn’t change. It’s still </p>.

Note: The same class can be assigned to any number of elements. And you can assign more than one class to an element. You just separate the class names by a space. Here’s an example.

<h3 class="special conspicuous enhanced">Hey now!<h3/>

Let’s say you’ve created a class named “special” that specifies a font size, a second class called “conspicuous” that displays it in red, and a third class called “enhanced” that specifies a font-weight of bold. In the example above, all three classes will apply to the heading. It will be extra-large, red, and bold.

Save your files. Display the page.

Sample CSS code:
http://asmarterwaytolearn.com/htmlcss/practice-7-1.html.

Sample HTML code:
http://asmarterwaytolearn.com/htmlcss/practice-7-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/7.html