Home CSS Tip: Class or ID?

CSS Tip: Class or ID?

CSS (Cascading Style Sheets) is used for styling your site. It gives a wide variety of options, allowing you to change the size and style of fonts, colors, images and the positioning of elements on the page.

Identifying an element in CSS can be done in a number of ways. You can affect all instances of a tag, such as paragraphs, headers or links. You can also be much more specific by using an ID or a class.

So what’s the difference between an ID and a class?

Using a CSS ID

Suppose you have a site with a header, navigation bar, content section and footer. The basic HTML for your site (minus the <body> tag and everything outside it) might look something like this:

If you wanted to style just the header, then you could do this:

Note the # symbol – this means that we want to affect the CSS ID. #header means that we want to affect the element with the ID “header”.

Using a CSS Class

If you wanted to style the “bubble” boxes, the following code would achieve this:

Note the period “.” – this means that we’re working with a class. .bubble means that we want to affect all elements with the class “bubble”.

Key Differences

Although you can apply the same styles regardless of whether you’re using an ID or a class, it’s important to understand the differences:

  1. ID must only be used for one element on a page; class can be used for many elements on a page
  2. ID can be used to select one item in JavaScript; class can be used to select multiple items in JavaScript

There’s more you can do with the ID of an element, but that’s a topic for another tutorial.

How To Choose

Use an ID for elements of the design that only appear once, such as your header and footer.

Use a class for elements that may appear many times on the same page but that need to be styled differently to the standard HTML tags. So you might use a class for an info box or a user avatar, but not for a standard paragraph of text.

Be Careful

If you are changing a site that you didn’t create, be very careful when editing IDs and classes. Not only can this break the site design, changing the ID of an element can break functionality. Test, test and test some more before pushing your changes to a live environment.

Photo by jeffisageek

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.