CSS Tutorial - Chapter 4: IDs and Classes

In the last chapter I went over how to apply CSS properties to HTML elements with the style attribute, and while this is all good for testing purposes and a few other specific uses, there are much better ways to apply CSS attributes on a larger scale - through assigning ID's and Classes.

ID's and Classes are a way of grouping a whole lot of CSS properties together for easier handling. For simplicitys sake, we'll not worry too much about the intricate differences between the two but rather just sum it up like this:

  • An ID is a group of properties for use on a single HTML element, that will only be used once within each specific document / page.

  • A Class is a group of properties you can use on as many elements as you would like throughout your document.

Not too hard was it? Now, there are other reasons for wanting to apply an ID to an element besides just letting it feel a bit more special, but we won't worry about them here since that's outside of the scope of this chapter.



The great thing about using ID's and Classes is now, we suddenly no longer have to keep any specific CSS properties inside our HTML file. We'll instead just make up some names for the ID's and Classes and apply them, like this:

<html>
  <head>
    <title>Setting a few IDs and Classes</title>
  </head>
  <body id="bodySettings">
    <h1>Another blue topic</h1>
    <p class="redText">
      Oh no, not the red apples again?
    </p>
    <p class="greenText">
      Green apples resurrected.
    </p>
  </body>
</html>

See how neat that looks? Now, if you were to have already tested the above example in your browser, you may have been a bit disappointed in noticing all the ID's and Classes won't really do anything. Don't worry, that's only because we haven't defined them yet.



To define an ID, you prefix it with a hash ( # ) sign. To define a class, you start off with a period ( . ). You can even set the default definition for a whole, general HTML tag by just providing its name. The names are then followed by the desired CSS settings within { and } brackets. See the examples below for an illustration of all three methods:



First, let's set the body ID and make the background color yellow:

#bodySettings{
  background-color: yellow;
}

Then, let's set our apple text classes to color the text accordingly:

.redText{
  color: red;
}

.greenText{
  color: green;
}

Now the thing that's left is the blue topic, which isn't blue yet. Since the <h1> header tag doesn't have any ID or Class applied to it, this must mean we wanted to redefine how the whole element works by making any and all <h1> headers within any page on our web site blue:

h1{
  color: blue;
}



Now, there's only one thing left, that most likely has you more than a little bit confused by now. Where do you actually put these definitions so the HTML document can find them? The answer to this lies in the next chapter which will tie it all together for you by introducing: The CSS file.





< Previous: The Style attribute

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl