Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

CSS Style Sheets

Page 3 of 5


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.

More pages of this tutorial → CSS Style Sheets  <12345>

Comments & Questions