Open boxes.html and save it as idclass.html.  Copy the whole div element in idclass.html.  Paste it under itself so there are now two identical div elements inside the body element.

So far any styles in boxes.css apply to all elements of a certain type (e.g. paragraphs or h1 elements).  Save idclass.html and view in a browser to see the two identically styled div elements.

Using ids

Back in your editor give the second div a unique identifier by changing the opening div tag to look like this:

<div id="hello">

An id is like a name and must be used only once on a page.  These IDs are used a lot by JavaScript as well as by CSS.  In boxes.css create this new rule set which uses the new id:

#hello {

The # symbol tells the browser that the text that follows is an id.

Make sure you have saved both files and view idclass.html in a browser.  The first div should be the same but the second should now have a different colour border.

You can change any other styles for just this one div by adding rules to the rule set.

Using classes

A class is like an id but for more than one element.  In idclass.html copy and paste so that you have four div elements in total:

<div class="bye">

Below all of the div elements paste these two new paragraphs:

<p>This is a paragraph.</p>
<p class="bye">This is also a paragraph.</p>

You are styling two div elements and a paragraph by applying the same class name to all three.  In boxes.css add a new rule set with a class selector:

.bye {

The finished example of id and classSave both files and view.  You should see four div elements and two paragraphs.  The bottom two div elements and the second paragraph should all have green backgrounds.


You can include more than one class or ID like this: class="first another onemore";.

A couple of thoughts

Classes are used much more than IDs because you can use a class for one rule set or many so it is more flexible.  Some people will only ever use classes.  However, you should technically be using IDs when you only want to style one item.

There are a couple of rules to follow when deciding what class names to use:

  1. they should describe the nature of the element to be styled (for example: imageholder, mapdiv, oddnumberedpara etc.)
  2. they should not describe the styles (e.g. greenbackground) because the styles might change later

To illustrate the second point imagine if you started wanting many div elements to have a green background:

.greenbg {

but then you change the appearance of the site and green no longer looks good so you want red instead:

.greenbg {

It will still work but it looks a bit silly.