Style classes
Now, imagine you have specified the style of all your
<p>
paragraphs using:
<style>
p {
font-style: italic;
}
</style>
but you also want to have another style for paragraphs, say with a green font and without italics. In this case you can define a new class of paragraphs. Take a look at the example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<style>
p {
font-style: italic;
}
p.my_green_example {
font-style: normal;
color: #00AA00;
}
</style></head>
<body>
<p>This is a regular paragraph</p>
<p class="my_green_example">This is another paragraph, using the <b>my_green_example</b> class</p>
</body>
</html>
To render:
As you can see, the second selector is
p.my_green_example. The period after the
p means that you are defining a new class of
<p>
elements. When you want to call that particular style in a paragraph, you can use the
<p>
tag with the
class attribute using the name of the class as value (see the example).
You can also define a class by starting directly with the period. In this case the new class will not be linked to a defined tag, but it will be available to any tag in which you may use it. Look at the example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<style>
.red_letters {
font-family: arial, helvetica;
color: #EE0000;
}
</style></head>
<body>
<h2>This is a regular header</h2>
<h2 class="red_letters">This is a header using the red_letters class</h2>
<p>This is a regular paragraph</p>
<p class="red_letters">This is another paragraph, using the <b>red_letters</b> class</p>
</body>
</html>
To render:
In this example we set a new class called
red_letters and we used it for the second
<h2>
element as well as for the second
<p>
element.
