Preparing HTML Markup for Styling

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.

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

Responsive Web Design – Modern Website Code for Beginners

When the internet was still young, website visitors used desktop and then laptop computers with wide screens to access websites. Then when smart phones were developed, mobile…

Beginner’s Guide to React

React is a JavaScript library that aims to simplify the development of visual interfaces. Developed at Facebook and released to the world in 2013, it drives some…

Server-Side Rendering (SSR) Made Easy With Angular Universal 9+

The Angular team recently, announced a pre-render builder in Angular Universal, in Jan 2020 to be specific. Angular Universal is for server-side rending (SSR); with these new…

Why Should I Use HTML5?

The most straight-forward answer to that question is simply that it is the current, “right” version of the language. But some people seem unconvinced by this fact….

What is HTML5?

HTML5 is the latest specification of the HTML language, and represented a major break with previous markup practices. The purpose of the profound changes to the language was…