HTML & CSS: Classes, IDs, and Divisions

So up until now we've been using very simple selectors in CSS to select certain elements on the page and apply stylings to them. We've been writing things like a { color: red; } - but what are we supposed to do if we want one element to have different stylings than another? Well the first solution is one we've already explored and is useful in some situations - nested selectors. So you might do something like a img to target images inside of anchor tags - but this doesn't suit all purposes. This is where classes and IDs come in.

IDs

IDs are unique identifiers for elements. You can assign an ID to an element in HTML by simply using the id attribute, so if we wanted to create a link with the ID of "headline_link", we would write something like this:

1

<a href="link_path" id="headline_link">Anchor Text</a>

The important things to remember about IDs are:

  • Each page can only have one element with a certain ID (IDs must be unique).
  • Each element can only have a maximum of one ID.

So you can compare an ID to a serial number on a product. There is only one thing that has that given ID (on a page), and you can only have one ID on an element (only one serial number to a product). So why is this useful? Well for a whole bunch of reasons, namely that we can target the ID in the CSS! IDs are defined in CSS selectors by using the hash symbol (#) - so if we wanted to style the link we created earlier (with the ID of "headline_link") to have red text, we might do something like this:

1
2
3

#headline_link {
    color: red;
}

It's as simple as that - the element with this ID will be styled in this way! IDs are especially useful when we use them with big block elements such as divisions - we'll talk about this later in this tutorial. Also, as a quick trick - URLs that end with a hash followed by an id name (for example http://www.example.com/index.html#headline_link) will make the browser jump straight to that ID on the page (this is one of the reasons why making IDs unique is so important).

Classes

Classes are a whole lot like IDs, but they are a little different. If IDs are like serial numbers, classes are like barcodes - you can apply them to multiple things. Just like all iPads in a shop will have the same barcodes, everything on a page which you want to have the same styling - you can apply a class to. Like IDs they are set using an attribute, so if we wanted to create a link with the class of "green" then we might do something like this:

1

<a href="link_path" class="green">Anchor Text</a>

Just to re-iterate what I've already said - here are the two important things to remember about classes:

  • Each page can have multiple elements with the same class.
  • Each element can have a number of classes.

Multiple classes can be applied to an element by simply adding a space and then another class name to the class attribute - so if we wanted a link to be in the class "green" and the class "special_border", then we might write something like this:

1

<a href="link_path" class="green special_border">Anchor Text</a>

We could then apply these classes to other elements later in the document if we wanted to. We can target classes in CSS by using a full stop (period for you Americans - .) followed by the class name - so if we wanted to create some stylings for the classes "green" and "special_border", we might do something like this:

1
2
3
4
5
6

.green {
    color: green;
}
.special_border {
    border: 2px solid black;
}

So let's actually see what we can do with IDs and classes by using them with some divisions (whatever those are)...

Divisions

Divisions are quite simply just sections of a page. They are block elements (hence take up all width available to them) and are represented using the <div> and </div> tags. They're so great because you can use them for pretty much anything. At the time of writing this, most websites on the web use divisions for their navigation bar, main content section, and footer. So let's combine these with IDs and see if we can create the start of a simple website!

Let's start with a basic HTML structure (with linked CSS file). Something like this will do fine:

1
2
3
4
5
6
7
8

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>

</body>
</html>

Simple, right? Now let's go ahead and add a simple division to the markup for our navigation.

1
2
3
4
5
6
7
8
9
10

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
    <div id="navigation" >
        <!-- We'll put stuff in here in a minute -->
    </div>
</body>
</html>

Awesome, now let's style this in some way. Let's give it a width of 100% (so it spans across the whole of the screen), a height of 60px (so it looks a little bit like a navigation bar), and a background of some sort (so we can actually see it):

1
2
3
4
5

#navigation {
    width: 100%;
    height: 60px;
    background: #3e3e3e;
}

This sort of works but it doesn't hug up to the corner like we want it to. The easiest way to fix this is using positioning - let's go ahead and position it absolutely to hug up to the top left hand corner:

1
2
3
4
5
6
7
8

#navigation {
    width: 100%;
    height: 60px;
    background: #3e3e3e;
    position: absolute;
    top: 0;
    left: 0;
}

Well would you look at that, it works! Now let's add some basic navigation to the page. There are a variety of ways to do this - but since navigation is basically just a list of links, it makes sense to use a ul of as. So let' s add that into our markup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
    <div id="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
</body>
</html>

Now this is going to require some tweaking so that it displays how we want it to. Let's set the margin on the ul to 0 firstly to avoid positioning problems (and set it's list-style-type to none to remove the bullet points), then let's get the lis to float left as to create a navigation-type effect. Let's also set the color of the links to white so we can see them, remove their underlines and then add a small margin-right to every one to separate them out. We can also set the line-height of the lis to the height of the navigation bar to center them vertically. So our CSS should now look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#navigation {
    width: 100%;
    height: 60px;
    background: #3e3e3e;
    position: absolute;
    top: 0;
    left: 0;
}
#navigation ul {
    margin: 0;
    list-style-type: none;
}
#navigation a {
    color: #FFF;
    text-decoration: none;
}
#navigation ul li {
    float: left;
    line-height: 60px;
    margin-right: 10px;
}

Let's also add a link hover effect in which the colour of the link changes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#navigation {
    width: 100%;
    height: 60px;
    background: #3e3e3e;
    position: absolute;
    top: 0;
    left: 0;
}
#navigation ul {
    margin: 0;
    list-style-type: none;
}
#navigation a {
    color: #fff;
    text-decoration: none;
}
#navigation a:hover {
    color: #1dbaf8;
}
#navigation ul li {
    float: left;
    line-height: 60px;
    margin-right: 10px;
}

And we did it - we have a basic navigation bar! It wouldn't be too difficult to add another division, give it an id, a width, a background, and make it have margins left and right of auto and then we have a main content division! In fact, if you want to try and test your knowledge - try to add a main content section (and maybe even a footer) to our basic website!