Practical Web Design

We saw how to select HTML tags with CSS, but, most of the time, you'll have multiple identical HTML tags, such as <p> or <a>. How do we differentiate them so we can only select and style a specific one? Here come the classes and IDs. They're used to select a specific HTML tag you have put an attribute id or class, for example:

<div id="header"></div>
<p class="big"></p>

To select this ID header in CSS, we'll need to write a hash (#) character, followed by the ID of the element, in this case, header:

#header {
  margin-left: 10px;
}

To select a class, we'll need to write a period (.) character, followed by the name of the class:

.big {
  font-size:20px;
}

So what is the difference between IDs and classes? The only difference is that IDs can be used only once in an HTML document, while Classes can be used multiple times. We also need to know the following:

For IDs:

Each element can have only one ID
Each page can have only one element with that ID

For classes:

You can use the same class on multiple elements
You can use multiple classes on the same element

We can, for example, have the following:

<div id="header" class="big red blue"></div>

Which means that the <div> element has an ID header and the classes big, red, and blue.

Let's add some classes and IDs into our document now:

<body> <!--This is our parent element -->

  <h1 id="my-name">John Doe</h1>
   <p class="text">I'm an <b>amazing</b> Designer</p>
   <input class="form" type="email" placeholder="Your email">
   <input class="button" type="submit">
   <img class="image" src="images/designer.jpg">
   <a class="link" href="http://twitter.com/philippehong">My Twitter</a>

</body>

As you can see, I added some really simple IDs and classes so you can understand how it works. We'll go into detail about the best practices when it comes to using IDs and classes.

Now that we have our IDs and classes, let's add some style to our CSS. For that, let's select our first ID, my-name, and make it bigger and underlined. For that, we will use the CSS properties font-size and text-decoration:

<style>
  body {
    text-align: center;
  }
  #my-name{
    font-size: 50px;
    text-decoration: underline;
  }
</style>

Let's style some classes now. For this example, let's add another <p> tag on our HTML document, just before our link, as follows:

<body> <!--This is where all our content will go-->

  <h1 id="my-name">John Doe</h1>
  <p class="text">I'm an <b>amazing</b> Designer</p>
  <input class="form" type="email" placeholder="Your email">
  <input class="button" type="submit">
  <img class="image" src="images/designer.jpg">
  <p class="text">Follow me on Twitter</p> <!--Added text-->
  <a class="link" href="http://twitter.com/philippehong">My Twitter</a>

</body>

Now that we have two elements with the same class, let's see what happens when we want to style the class text by adding a font-family property:

<style>
  body {
    text-align: center;
  }
  #my-name{
    font-size: 50px;
    text-decoration: underline;
  }
  .text {
    font-family: Arial;
  }
</style>

Save your HTML document and refresh your browser. This is what you should see:

This should change the font of the elements with the class text. You can see that both elements have changed.

Table of Contents for
Practical Web Design

Classes and IDs

Table of Contents for Practical Web Design

Table of Contents for
Practical Web Design