Class and id tags will revolutionize your HTML. They're absolutely necessary when your pages start becoming more complex.
Let's say you're working on a news website, which is likely to contain paragraphs and paragraphs of text. Some paragraphs will be within news articles, others might be disclaimer text at the bottom of the page, others will be short article blurbs; in sum, you have no way to tell these paragraphs apart from one another. Since they're all just <p> tags, you won't be able to apply CSS (appearance) changes to some paragraphs but not others.
This is where classes and ids enter the scene.
Classes and ids are custom attributes you can add to your elements in order to distinguish them from one another.
Classes apply to groups of elements, and ids apply to only one single element on an entire page. Let's check out classes first.
Classes
Setting a class attribute is as simple as choosing the class name and adding the attribute to your element, like:
<h1 class="breaking-news">Your heading here</h1>
<p class="warning">Your paragraph text here</p>
<p>More paragraph text is <span class="highlight">coming your way.</span></p>In this very generic code example,
The heading has a class of "breaking-news".
The paragraph has a class of "warning".
The span has a class of "highlight".
Classes like this allow you to apply custom CSS to certain elements but not others. Take this web page screenshot with filler text:
The code behind it has 6 different paragraph tags, but 2 of them are orange to indicate a warning, or something the reader should watch out for. The way to accomplish this is to add a class of "warning" to the appropriate paragraphs:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu massa, placerat et laoreet et, blandit ut tellus.</p>
<p>Pellentesque ac enim vel neque volutpat luctus vitae quis lorem. Mauris sit amet mi vehicula, pharetra odio eu, aliquet ipsum. Nullam luctus sem quis quam suscipit condimentum. Vestibulum orci mi, tincidunt vitae eleifend in, fringilla ac tellus. Fusce imperdiet ante erat, volutpat fringilla est commodo nec. </p>
<p class="warning">Watch out! Nunc vulputate sit amet enim ut efficitur. Sed volutpat nunc in viverra pretium.</p>
<p>Maecenas quis nunc facilisis, cursus diam eget, bibendum lectus. Aenean iaculis nunc in mollis vehicula. Vivamus urna turpis, fringilla eu efficitur ac, luctus sed magna.</p>
<p>Integer vel quam consequat, accumsan nisi nec, consequat dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ultrices nisi vel elementum luctus.</p>
<p class="warning">Watch out! Mauris et quam nec felis mattis sagittis vel eget felis. Proin tempor nibh in sollicitudin aliquam. Donec scelerisque non arcu id molestie. Nullam luctus aliquam augue, non rhoncus dui auctor in.</p>By adding class="warning" as an attribute to certain paragraph tags, you can grab the relevant paragraphs and update the background color to orange for specific paragraphs!
It bears repeating one more time that classes can be applied to multiple elements on a page, unlike ids. Let's check them out.
ids
Ids are just like classes — they are custom attributes that can be added to elements — except they'll only apply to one element per page.
There were multiple warning paragraphs. On the same page, let's say we want to have one single key takeaway (added to the HTML above):
<p id="key-takeaway">Therefore, this is the one thing you should remember from the whole page.</p>Now in my CSS, I can adapt that one element's appearance!
Naming classes and ids
I named the class warning and the id key-takeaway myself, but I could've given them ridiculous names like grizzly-bear-jazz-trio and taco-tuesday and they would still work, as long as I referenced the same names ( grizzly-bear-jazz-trio and taco-tuesday ) in my CSS.
Nonetheless, it's good to name your classes and ids understandably. Name them based on context or function, not on appearance.
For example, a class called "warning" could apply to scenarios where the content should have a warning function or context.
Practice!
Before moving on, practice adding classes and ids to elements in this CodePen!
