Basic Differences Between a CSS ID and a CSS Class

If you’re just getting into marketing and analytics, data and behavior tracking, or even programming/web development, one of the common terms that you’ll often hear thrown around or read about is ‘CSS selectors.’ Amongst a bunch of them, two of the commonly used CSS selectors are ID and class.

Both these selectors help apply styling to an HTML element by appending itself within the tag itself. For example:

<h1 id="green"> This ID sets both the background color and the text color to green </h1>

Here, the CSS ID “green” is applied to the HTML element h1. And yes, what green means would be first defined in the CSS code so that the HTML element understands its intent. In our case, it could be something like below:

<style>
#green {
background-color: green;
color: green;
}
</style>

So, what are the basic differences between a CSS ID and a CSS class?

Difference 1: How They Are Defined

You can recognize whether a CSS selector is an ID or a class by looking at the special character preceding the name.

An ID always starts with the hash symbol (#, as you saw in our “green” example). On the other hand, a CSS class starts with a period (.). Let’s take a look at the following sets of code:

An Example of naming a CSS ID
<style>
#hithisisaCSSID {
padding: 10px;
}
</style>

An Example of naming a CSS class
<style>
.hithisisaCSSclass {
color: red;
}
</style>

In the first code block, we have a CSS ID with the name of–>histhisisaCSSID. In the second, we have a CSS class with the name of–>histhisisaCSSclass.

On the HTML side, the calling is also made accordingly. For instance, as you saw in my “green” example, I was calling the ID green by saying–><h1 id="green">. Now assume that green was a CSS class. In that situation, on the HTML side, I would have called it as–><h1 class="green">

Difference 2: Uniqueness

Remember that on a web-page:

1. Every HTML element can only have 1 unique ID. Further,
2. Each page can only have 1 element with that ID name.

In other words, do not assign the same ID more than once per web-page. Well, I suppose you could, but you might fail validation.

A CSS class on the other hand, can be used multiple times on a web-page. In fact, the same class can be applied to more than 1 HTML element, and even multiple classes can be used per element. Say, that you have this line of code:

<h1 class="red green orange">. In this situation, the h1 element is using 3 classes with the names of:

• red
• green
• orange

Going a bit further here, I can use the same three classes on a different HTML element on the same web page. Let’s go with h2. In that case, my code can look like:

<h2 class="red green orange">

^Notice how I am using the same class name multiple times on two different HTML elements. With CSS classes, it’s okay to do so. With IDs, it’s not.

Difference 3: IDs Can Be Used As Page-Specific Anchor Links or What Other May Know As Jump Links

In my opinion, this is quite a unique difference between a CSS ID and a CSS class.

A CSS ID can be used to create jump links. For example, if you look at my Google Analytics Glossary Blog post, you’ll notice that I have a table of contents. Clicking on any item from there will take you to that specific section of the page. Many, refer to this as jump links.

Anyway, coming back to the point, say you click on “What Are “Number of Sessions per User”?” (item number 3 in the table of contents). Once you do, you’d be navigated down to that section. Now, if you examine the h2, you’d notice that it has been assigned an ID of what-are-number-of-sessions-per-user. See the screenshot below for visual reference.

In Conclusion

A knowledgeable Web Developer can bend and defy some of these differences; however, on a super basic level, if you’re just starting about in the Web Development world, keeping these simple yet fundamental distinguishing features between a CSS ID and a CSS class can really help you grow your career.

In my experience of working with developers and learning whatever there is about web development, the consistency that I’ve noticed is that you’ve got to get your basic concepts and principles down to the core. Once that happens, only then it makes sense to attempt to bend the rules or create exceptions for your website’s code-base.

And the best way to learn something, or get a firmer grasp on any learning is? To either teach in a classroom setting, write a blog, or create videos for others.

Expert Resources

1. w3schools
2. skillcrush