In order to style elements on a page, we need to be able to target them through CSS classes and IDs.
In addition to elements; h1, p, li, etc. classes and IDs give us additional ways to apply specific rules to each element on the page. In essence, the main difference between IDs and classes is this:
IDs are unique, Classes are ubiquitious.
So in other words:
- Each element on your page can only have one ID; you can’t add multiple IDs to one element.
- Each ID must only appear once on the rendered page.
- Each element can have multiple classes assigned to it
- Each class can be used in multiple places on a rendered page.
On their own, classes and IDs don’t have any default styling applied to them; you need to do that by creating ‘attributes’ in your CSS file. Attributes tell the browser what styling to apply to each element. So, in essence, you’re saying things to the browser like this; for every class you find on the page called “heading” apply the attribute “green” to the text colour. Or; for the element with an ID named “intro” make the background colour, yellow.
In the code below, all the elements with the class “heading” can have the text set to green and the <div> with the ID “intro” can have its background set to display in yellow.
<div ID="intro">
<h1 class="heading">Intro Heading 1</h1>
<h2 class="heading">Intro Heading 2</h2>
<p class="content">Intro Content</p>
</div>
<div ID="body">
<p class="content">Body Content</p>
</div>Classes are re-usable and that makes them really useful when you need to target multiple elements on your page as in this example above. The real power of CSS comes into play when you appreciate how versatile the selector system can be.
Using the code example above I can target each element with combinations of selectors:
- #intro will target everything within the div named “intro” and wont affect the div named “body”
- #intro .heading will target both H1 and H2 headings but wont affect the elements classed as “content”
- .content will target both the items in the intro and body div with class “content” and wont affect the headings
You can target even more specific items by also using their tags; h1, h2 and p in the example above.
IDs have additional abilities that classes don’t have.
- They can be used in the sites URL structure to navigate directly to that element of the page
- They can be used in JavaScript to target elements using
getElementById
Classes can be inserted and removed from elements on the fly by using jQuery, a JavaScript library but it cannot do the same for IDs.
IDs and classes are powerful tools for organising elements and sections on your page and there is a whole other world of best practice when it comes to setting up class names and attributes. Classes are so powerful, you can even animate elements on the page without the need for JavaScript. Check out this example here.
Be prepared; there’s a lot more when it comes to using CSS classes and IDs… class hierarchy, modifiers and more.