You can easily apply a style to all the elements of a particular type in a HTML5 page, but sometimes you might want to have tighter control of your styles. For example, you might want to have more than one paragraph style. As an example, look at the classes.html page.
Once again, multiple formats are on this page:
Questions have a large italic sans serif font. There's more than one question.
Answers are smaller, blue, and in a cursive font. There's more than one answer, too.
Questions and answers are all paragraphs, so you can't simply style the paragraph because you need two distinct styles. There's more than one question and more than one answer, so the ID trick would be problematic. Two different elements can't have the same ID. This is where the notion of classes comes into play. Every ID belongs to a single element, but many elements can share the same class.
How to add classes to the page
CSS allows you to define classes in your HTML and make style definitions that are applied across a class. It works like this:
Add the class attribute to your HTML questions.
Unlike ID, several elements can share the same class. Setting the class to question indicates these paragraphs will be styled as questions:
<p class = "question"> What kind of cow lives in the Arctic? </p>
Add similar class attributes to the answers by setting the class of the answers to answer:
<p class = "answer"> An Eskimoo! </p>
Now you have two different subclasses of paragraph: question and answer.
Create a class style for the questions.
The class style is defined in CSS. Specify a class with the period (.) before the class name. Classes are defined in CSS like this:
<style type = "text/css"> .question { font: italic 150% arial, sans-serif; text-align: left; }In this situation, the question class is defined as a large sans serif font aligned to the left.
Define the look of the answers.
The class uses a right-justified cursive font.
.answer {
font: 120% "Comic Sans MS", cursive;
text-align: right;
color: #00F;
}
</style>
Using classes
Here's the code for the page, showing how to use CSS classes:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>classes.html</title>
<style type = "text/css">
.question {
font: italic 150% arial, sans-serif;
text-align: left;
}
.answer {
font: 120% "Comic Sans MS", cursive;
text-align: right;
color: #00F;
}
</style>
</head>
<body>
<h1>Favorite Jokes</h1>
<p class = "question">
What kind of cow lives in the Arctic?
</p>
<p class = "answer">
An Eskimoo!
</p>
<p class = "question">
What goes on top of a dog house?
</p>
<p class = "answer">
The woof!
</p>
</body>
</html>
Sometimes you see selectors, like
p.fancy
that include both an element and a class name. This style is applied only to paragraphs with the class attached. Generally, classes are great because they can be applied to all kinds of things, so you can leave the element name out to make the style as reusable as possible.
Combining classes
One element can use more than one class.
The paragraphs appear to be in three different styles, but only red and script are defined. The third paragraph uses both classes. Here's the code:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>redScript.html</title>
<style type = "text/css">
.red {
color: white;
background-color: red;
}
.script {
font-family: cursive;
}
</style>
</head>
<body>
<h1>Multiple Classes</h1>
<p class = "red">
This paragraph uses the red class
</p>
<p class = "script">
This paragraph uses the script class
</p>
<p class = "red script">
This paragraph uses both classes
</p>
</body>
</html>
The style sheet introduces two classes. The red class makes the paragraph red (well, white text with a red background), and the script class applies a cursive font to the element.
The first two paragraphs each have a class, and the classes act as you'd expect. The interesting part is the third paragraph because it has two classes.
<p class = "red script">
Both styles will be applied to the element in the order they are written. Note that both class names occur inside quotes and no commas are needed (or allowed). You can apply more than two classes to an element if you wish. If the classes have conflicting rules (say one makes the element green and the next makes it blue), the latest class in the list will overwrite earlier values.
An element can also have an ID. The ID style, the element style, and all the class styles are taken into account when the browser tries to display the object.
Usually, it's best to name classes based on their meaning (like mainBackgroundColor). You might decide that green is better than red, so you either have to change the class name or you have to have a red class that colored things green. That'd be weird.