Home › CSS › CSS Types: Tags, Classes, and IDs

CSS Types: Tags, Classes, and IDs

WordPress is a great tool for building websites — one of its strengths is that you don't need to know code. But I've found it incredibly useful to know something about CSS. For every WordPress site I've worked on, I've needed to tweak the CSS at least a little. In this post, let's look at the different types of CSS rules.

When working with CSS you'll encounter tags, classes, IDs, and compounds. Here's what each one does.

Tags

A CSS tag style redefines an existing HTML tag. For example:

h1 {
  font-size: 24px;
  margin: 12px 0 12px 0;
}

This makes every h1 heading on the page display at 24px with 12px margin above and below. You can redefine almost any HTML tag: body, p, h1 through h6, a (links), and more.

Classes

Classes take CSS further by letting you create your own named styles — used as many times as you need on a page. Class names always begin with a period:

.redbold {
  color: red;
  font-weight: bold;
}

To apply this class in HTML:

<p>This is text. <span class="redbold">And this is in red.</span></p>

Another common use of classes is creating repeating boxes — like a testimonial container that appears multiple times on a page with the same styling. See Creating a Box in CSS for an example.

IDs

IDs are similar to classes but are used only once per page. ID names always begin with a #:

#container {
  width: 960px;
}

To apply an ID in HTML:

<div id="container">
  All the page content goes here.
</div>

Use IDs for unique structural elements like your page wrapper, header, footer, or main navigation — things that appear once per page.

Bonus: Compound Rules

Compounds combine a class or ID with a tag to apply styles only in a specific context. For example, to make h1 headings red only inside the right sidebar — but not elsewhere on the page:

#rightsidebar {
  width: 250px;
  float: right;
}

#rightsidebar h1 {
  color: red;
}

Now any h1 inside <div id="rightsidebar"> will be red, while h1 headings everywhere else on the page remain unchanged. Very powerful for applying context-specific styles without creating extra classes.