Basic styling with CSS: class vs. id (and anchor links)

In the last tutorial we created three simple HTML pages and linked them together, creating the (very basic) foundation for our soon-to-be awesome website. That foundation doesn’t look very good though—so in this tutorial we’re going to dress it up a bit. Before we can start coding our layouts, it’s useful to understand some basic CSS selectors…

If you think back to tutorial 4, where we explored the relationship between CSS and HTML, you might remember that we can “select” which HTML elements to style from our CSS file using a declaration block with a selector, like the one below.

Here, our style p { }  is selecting the <p>  (paragraph) tag in our HTML. This results in the demo file from that tutorial (also illustrated below), where we can see that our header is red and our paragraph is blue, because that’s what we defined in our CSS.

These are pretty easy to understand, right? The  p { } in the CSS corresponds to the <p>  in the HTML. That’s great, and we could go about styling a whole site like this… sort of. But what happens when there are more than one of a certain element on a page? Let’s find out.

Step 1

I’m going to add to the index.html file that we started in the last tutorial—adding four paragraphs full of Greeking, or Lorem Ipsum (dummy text added to the page to simulate what normal text would look like—more info on Wikipedia) so that we can get a feel for what extended text will look like on the page. You can copy and paste the Lorem Ipsum from my code below, or grab any dummy text you wish.

Make sure each paragraph of text you add is contained within opening and closing paragraph tags like this:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...</p>

Note that I’m only adding two short paragraphs here, you’ll want to add more text to your pages—that way, we have distinct paragraphs, with space in between, creating a long page. It’ll end up looking like the screenshot below:

Figure 1: paragraphs of text separated by whitespace, continuing off the page.

What’s the problem here? Well, all of our paragraphs are blue. That’s fine, but what if you wanted just a single paragraph to be a different color? What if you wanted all of them to be different colors? Since we used the p{}  selector in our CSS and that selects ALL of the instances of <p>  in the HTML, we need another way to identify unique paragraphs.

Unique styles with class

The way to do this is assign another attribute to the tag, in this case the class attribute. We’re going to define it first in our CSS and then apply it to specific HTML tags. These are the styles we currently have in our CSS file:

p { 
  color:blue; 
}
h1 {
  color:red;
}

Step 2

I’m going to change the default paragraph to be black to start with, and then I’m going to create a class  called highlight  below it, and make it orange:

p { 
  color:black; 
}
.highlight {
  color:orange;
}
h1 {
  color:red;
}

Notice how highlight has a period before it? That signifies that this is a class, not simply an element. Whenever you define classes in CSS, they have a period immediately preceding them. Now that our class is defined in CSS, we can apply it in our HTML.

Preview your index.html file in the browser. All of the paragraphs should now be black. (None are orange yet, because we haven’t applied this class to anything in the HTML.

Step 3

Now open your index.html file in your editor. Find the first paragraph on the page, and we’re going to apply the highlight class we created to it, as seen below (I’ve shortened the paragraph to just a few words for the tutorial, you can leave the full text in yours):

<p class="highlight">Lorem ipsum dolor sit amet, consectetur...</p>

We just added a class attribute to our p element. Remember attributes from tutorial 3? Here’s a review of their structure:

Remember that attributes come in name/value pairs. In the code we just added, the name is class, and the value is highlight.

Now, this particular paragraph should be orange. Take a look at the index.html file in your browser to see if it worked. It should look like this:

We just applied the “highlight” class to a single paragraph on our page, but now that you have this class, you can apply it to any element you’d like. Try doing the same thing with a different paragraph on the page—anywhere you apply it, the paragraph should be orange.

Let’s create another class just for practice.

Step 4

Back in my CSS file, I’ll add another class called “callout” and make it blue. Here’s what the file should look like:

p { 
  color:black; 
}
.highlight {
  color:orange;
}
.callout {
  color:blue;
}
h1 {
  color:red;
}

Remember to add the period in front of callout to signify that it is a class.

Step 5

Now we’ll apply this class to a different paragraph in our HTML.

<p class="highlight">Lorem ipsum dolor sit amet, consectetur...</p>
<p class="callout">Lorem ipsum dolor sit amet, consectetur...</p>

So now we have one paragraph with the class “highlight” and another with the class “callout”. Preview in your browser to ensure they both correctly changed color.

Applying classes to any element is as easy as this. Just remember, in the HTML, the syntax looks like this: class=”highlight”  and in the corresponding CSS, it’ll look like this .highlight  (where highlight is the defined style name). Always make sure you remember the period in the CSS definition, while it is not included in the HTML.

So that’s basically it for simple classes. But there’s another attribute very similar to a class that you should understand, and understand when to (and not to) use, called an id.

Understanding id (vs. class)

Similar…

Ids can be used to style any element on the page, just like classes can, but the syntax is a little different. In CSS, instead of a period . , ids are represented by a pound sign, or hash tag: # . In HTML, the attribute appears like id=”foo”  instead of class=”foo”  (foo being an example value.)

But very different.

The main, and important difference is that any given id can only be used once per HTML page. This is because an id can be used to create an “anchor” to link to and if you include more than one on any given page, the browser will not know where you intended to link to. Therefore, the use of any given id more than once per page is an error.

Let’s see how this works to style things.

Step 6

In your CSS file, add the following id called “bottom” (note the use of the #). For now, we’ll make it red.

#bottom {
  color:red;
}

Step 7

Now we’ll apply this “bottom” id to the last paragraph on our HTML page like so:

<p id="bottom">Lorem ipsum dolor sit amet, consectetur...</p>

Take a look at the page in your browser. You might have to scroll down (depending on how many paragraphs you added and how large your screen is), but now the last paragraph on the page should be red.

As far as this example is concerned, this id and the classes we added earlier do the same thing. Let’s explore anchor links to see why id’s are a little bit different.

Anchor links

Again, what makes the id special (and why each unique id should only be used once per HTML page) is because you can link to them. If your paragraph turned red, you’ve already successfully made the “anchor” for the link. Now we just need to link to it.

Step 8

Somewhere at the top of my page —I’ll put it right below my header—I’m going to add another link to the page like the link below:

<a href="#bottom">Link to bottom</a>

This should look very similar to the relative links we made in the previous tutorial, except this time the value of the href attribute is #bottom , instead of a different file name. Notice how this matched the style we just created for the id in our CSS! We’re actually linking to this id this time, instead of another page.

Open up your browser to test. To make sure this works right, make your browser window small enough so that the last paragraph on your page is hidden (you have to scroll down to see it.) With it hidden, try clicking on the link you made on the top of the page that says “Link to bottom.”

If you did it all right, your page should “jump” down, so that the bottom paragraph is now visible. This is possible because the id you created acts as an “anchor” point you can link to. This is the fundamental difference between classes and ids!

Wrapup

Using classes on different elements is a fundamental method that we’ll use to style our pages and create unique layouts. In the next tutorial, we’ll use this to start structuring and styling our pages—head over to The Box Model: visualizing HTML & CSS now!

Download

You can preview how this tutorial’s code should look here (opens in new tab).

Or, download the files for this tutorial to see how the code works here (zip file).