IDs vs Classes: What’s the Difference?

In HTML we need to have the ability to describe and categorize all the elements on our page in order to style and structure our site as needed. That’s where IDs and Classes come in!

HTML IDs and classes are tools we use to group or identify specific elements on our page. However, what’s the difference between the two, and when are the best situations to use them? Let me walk you through the basics…

How Are IDs Treated

IDs are used to specify one HTML element, so you can only have one instance of an ID on any page. A good example of when you’d need to use an ID attribute is when you’re trying to style your header, footer, or body since most pages only have one of each. To point to an element with a specific ID in CSS you’ll need to denote the ID value with a hashtag (#) and then you can apply your edits as needed. For example, let's say you want to add an ID element to your footer and adjust its color. When writing the code to build your footer, you’ll add the ID name in your tag:

<footer id = "bottom"> This is a footer. </footer>

Now in order to adjust any CSS attributes of your footer, you’ll need to write your code on your CSS document like so:

#footer {background - color: yellow; margin: auto; padding-bottom: 20%}

Your footer will now show all of the aforementioned changes!

How Are Classes Treated

In Html, the class attribute is not unique and can be used to tag or group together multiple elements on a page. It is possible to assign a class to a single Html element on your page but traditionally IDs are used for those instances, and in order to maximize the power of classes it’s best to use them to target multiple elements.

Classes make it quick & easy to alter the CSS and styling of several pieces of content on a page. For example, let’s say you have three paragraphs on your page:

Here’s paragraph one.

Here’s paragraph two.

Here’s paragraph three.

Let’s say all of these paragraphs live in a sidebar on your page. You’d want them to all be styled and look the same, right? Within the paragraph tag you’d simply just need to assign them all the same class, like so:

<p class= "sidebar"> Here’s paragraph one. </p>
<p class= "sidebar"> Here’s paragraph two. </p>
<p class= "sidebar"> Here’s paragraph three. </p>
<p class= "sidebar"> Here’s paragraph four. </p>

Now, if you want to change the color, alignment, font-weight, or any other CSS property of all of these paragraphs at the same time, you’ll only need to write CSS targeting the “sidebar” class. To do that, you’ll go to your CSS page and use a dot (.) in front of the class value and apply your CSS notes as needed. Here’s an example:

.sidebar {color: blue; text-align: center; font-weight: 500px;}

Now, all of the paragraphs in your sidebar will be blue, have the same font-weight, and be aligned in the center.

Conclusion: General Review on Differences

Classes and IDs are both useful tools for styling and organizing the elements on any HTML page. Classes offer developers the advantage of manipulating multiple elements at once, while IDs give them the ability to pinpoint just one. Try using a class or ID attribute for CSS styling on your next project. Also feel free to use them both on one element if needed!

Sources:

W3 Schools, HTML id Attribute

https://www.w3schools.com/html/html_id.asp

W3 Schools, HTML class Attribute

https://www.w3schools.com/tags/att_class.asp#:~:text=Definition%20and%20Usage,elements%20with%20a%20specified%20class.

DevelopIntelligence, CSS Class & ID

https://www.developintelligence.com/blog/2016/04/css-class-vs-id-which-one-to-use/