www.RickBull.com > tutorials > Cascading Style Sheets > Basics of Style
Jump to: Contents | Part 1 | Part 2 | Part 3 | Answers | FAQ

Applying Styles to Only Certain Objects

In part one I showed you the basics of how to use CSS, but unless you used the inline method you had to apply it to all elements, which is not always what you want. So how do you apply style to only particular objects in your HTML, without using inline style? Well there are several ways to do it, and I will show you a few of them here:

Note: The following examples all apply to either style using the head or the external methods, and not the inline method.

Classes

Classes are a way of describing a group of definitions that can be applied to as may different elements as you like. You define a style as shown before, but you also add a full-stop(.) and the name of the class after the element you are addressing. So, for example, if we wanted to have a class for paragraphs (<p>) named centre (in which all text would be aligned centre) it could look something like this:

p.centre {
  text-align: center;
}

Then to use this class in our HTML, we simply add the attribute class to any paragraph tags we want to apply it to, and make its value equal centre:

<p class="centre">
  The text in this paragraph should be centre aligned.
</p>

So that is how you apply classes to particular elements (<p> in this case), but what if we want a class that can be applied on any element, not just the paragraph tag? Well, it is quite simple, all we do is leave out the p before the class name like so:

.centre {
  text-align: center;
}

Then we can apply this class to any element and its text should be centre aligned (if that element allows it that is):

<p class="centre">
  The text in this paragraph should be centre aligned.
</p>

<div class="centre">
  And so should this.
</div>

<h2 class="centre">
  Heading with centre alignment.
</h2>

So you see now we can apply the style to different elements (including the original <p> tag).

IDs

IDs in HTML are a way of indentifing (and later referncing) individual objects in your page. So for example if we had a <div> tag and we wanted to give it an ID so that we could refernce it using CSS (or JavaScript, etc.) we could do it like this:

<div id="div1">Some text</div>

So then if we wanted to change any aspect of only that particular DIV, we would do it by its ID, div1. Does that make sense?

Note: I should also mention that each ID in your page must be unique from every other ID, otherwise how could you identify a single object in your page?

So now you know roughly what an ID is, you will probably want to know how you can make use of it (if not feel free to skip this section!). Well, it is very similar to how we used classes. In our CSS code we simply put a hash (#) before the ID we are addressing. So if we wanted again to make all of the text in the div1 object be centre aligned we could do it with the following code:

#div1 {
  text-align: center;
}

Then in your HTML (the code above) only the element with the ID of div1 would have centre aligned text

Summary and Examples

So I have shown you how to use classes and IDs, but maybe you are still a little unclear on how it all works. Well, not to worry because I have a couple of examples for you below. For clarity's sake I have just included the style definitions using the head method, but feel free to change it to use the external method:

Example 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="language" content="en" />
    <title>CSS Example</title>
    <style type="text/css><!--
      p.center {
        text-align: center;
      }
    --></style>
  </head>
  <body>
    <p class="center">
      This will work because we have addressed the 
      &lt;p&gt; element in the style definitions.
    </p>
    <div class="center">
      This on the other hand will not because we have not addressed the 
      &lt;div&gt; element in the style definitions.
    </div>
  </body>
</html>

Example 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="language" content="en" />
    <title>CSS Example</title>
    <style type="text/css><!--
      #divRight {
        text-align: right;
      }
      .center {
        text-align: center;
      }
    --></style>
  </head>
  <body>
    <p class="center">
      This will work because we have not addressed any one 
      particular element in the style definitions.
    </p>
    <div class="center">
      As above!
    </div>
    <div id="divRight">
      This should have the text right aligned as we have
      addressed this object via its ID.
    </div>
  </body>
</html>

So hopefully if you were a little unclear on how it all worked reading through the above two code example should have helped to clear things up. If not just slowly read through and see how the class and id attributes relate to the CSS code, and it should all become clear.


Exercises

To test your knowledge of classes and ID here are a few examples for you to try:

  1. Create a simple HTML page (based on one of the excercises in the first part of this tutorial if you want) that has three paragraphs. For these three paragraphs create the following:
    1. Centre aligned text using the class attribute
    2. Right aligned text using the id attribute
    3. A background-color of blue and a color of white, using the class attribute.
  2. Modify the code from the first example to make the paragraph with the id attribute (and the right aligned text) also have the same class as the last paragraph (with the blue background, and white foreground).
View Answers

All tutorials and content written by Rick Bull unless otherwise stated
Page's last update: Friday, 15th January 2010; 12:53:40 GMT +0000
Official CSS Level 1 documentation: http://www.w3.org/TR/REC-CSS1
Official CSS Level 2 documentation: http://www.w3.org/TR/REC-CSS2
Top of the page