CSS should be used to add content to a web page. That task is best handled by markup languages such as HTML and XML. Instead, CSS is used to pick items that already exist on a web page and to define how each item should appear.
In order to make it as easy as possible to select items on a web page, identifiers should be added to elements on the webpage. These identifiers, often called hooks in the context of CSS, make it easier to identify the items that should be affected by the CSS rules.
Classes and IDs are used as hooks for CSS styles. While the way CSS renders is not affected by the use of classes and hooks, they give developers the ability to pinpoint HTML elements that they wish to style.
Classes and IDs aren’t interchangeable. It’s important to know when to use each.
When to Use Classes
Use classes when there are multiple elements on a single web page that need to be styled. For example, let’s say that you want links in the page header and footer to be styled in a consistent manner, but not the same way as the links in the body of the page. To pinpoint those links you could add a class to each of those links or the container holding the links. Then, you could specify the styles using the class and be sure that they would only be applied to the links with that class attribute.
When to Use IDs
Use IDs for elements that only appear once on a web page. For example, if you’re using an HTML unordered list for your site navigation, you could use an ID such as nav to create a unique hook for that list.
Here’s an example of the HTML and CSS code for a simple navigation bar for a basic e-commerce site.
<style>
#nav {
background: lightgray;
overflow: auto;
}
#nav li {
float: left;
padding: 10px;
}
#nav li:hover {
background: gray;
}
</style>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Shop</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
That code would produce a horizontal navigation menu with a light gray background beginning from the left-hand side of the page. Each navigation item will have 10 pixels of spacing on all sides and the background of each item will become darker when you allow your mouse to hover over it.
Any additional lists on the same web page would not be affected by that code.
#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}
When Not to Use Hooks
You don’t have to add a class or ID to an HTML element in order to style it with CSS. If you know you want to style every instance of a specific element on a web page you can use the element tag itself.
For example, let’s say that you want to create consistent heading styles. Rather than adding a class or ID to each heading it would be much easier to simply style all heading elements by using the heading tag.
<style>
ul {
list-style-type: upper-roman;
margin-left: 50px;
}
p {
color: darkblue
}
</style>
<p>Some paragraph text here. Two short sentences.</p>
<ul>
<li>A quick list</li>
<li>Just two items</li>
</ul>
<p>Additional paragraph text here. This time let's go for three sentences. Like this.</p>
That code would render like this.
.code_sample ul {
list-style-type: upper-roman;
margin-left: 50px;
}
.code_sample p {
color: darkblue
}
Some paragraph text here. Two short sentences.
- A quick list
- Just two items
Additional paragraph text here. This time let’s go for three sentences. Like this.
- Another list
- Still just two items
In this case, even though we only wrote the style rules for ul and p elements once each, multiple items were affected. Using element selectors is a great way to create an attractive, readable, and consistent website experience by creating consistent styling of headings, lists, and paragraph text on every page of the website.
