The CSS type selector

The CSS Type selector (also called an element type selector) is used to target HTML elements by their type. The type could be any of the built-in HTML elements, such as <h2>, <p>, <button>.

Type selector syntax

We use the following syntax to style elements via the type selector

element-name {
    property-name: value;
}

For example let’s style this button element via its type selector:

<button>Click me!</button>

CSS:

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

Result:

Click me!

When you use the type selector you style elements on your website broadly.

So if you have 10 button elements on your website, and you use the CSS from above, then every button will get that same styling. This may or may not be what you want, depending on the context.

Base styles

It can be a good idea to set some broad base styling directly on HTML elements. However, the base styling should be as unspecific as possible. It should serve as a way to enforce meaningful visual consistency across your UI — and avoid needless code repetition.

Areas you often want to be consistent with:

• Fonts (also called typefaces)
• Font size
• Line height
• Colors
• Spacing (whitespace)

For example, it’s a good practice to be consistent with your choice of font families in your UI. You don’t want to use 5 different fonts, it makes your UI look weird and inconsistent. You want somewhere between 1 and a maximum of 3 different font families on most websites.

Let’s say you want to use two types of fonts on your website:

1. a Serif for your paragraphs and lists
2. a Sans Serif for everything else.

In this case, it makes perfect sense to use the broad type selector to apply those font families:

/* Roboto is a sans serif*/
html, body {
  font-family: roboto;  
}

/* Merriweather is a serif*/
p, li {
  font-family: merriweather;
}

With the CSS above, every HTML element will use the Roboto font, except paragraphs and lists which will use Merriweather.

When to not use the type selector?

It’s generally a bad practice to “over style” any element with a broad stroke because it affects every representation of that element on your page.

For example, don’t do this in your CSS:

button {
  font-size: 1.125rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid #444444;
  color: green; 
  background-color: black; 
  transition: all 1s ease-in;
}

The above will apply a bunch of styles to every button element on your website. Chances are that you have multiple buttons with different roles on your website. Although you want the base UI design to be consistent (especially typography) you probably don’t want them all to look or behave exactly the same. Especially things like margin values are dangerous to apply broadly to any given element type.

Of course, you can always override any base styling on an element by using a class selector. However, the purpose of using classes is not to spend a bunch of time undoing/overriding base styles passed down from the element selector.

The purpose of using classes on elements is:

• To extend base styles on elements in specific situations that call for it. For example, you might want the call to action button on your hero sections to be slightly bigger than everywhere else.
• Reusability. Classes can be reused infinitely, which makes them flexible and efficient. A great example of that is the Tailwind CSS framework which is based on single-purpose utility classes, also known as functional CSS.

In summary:

• Use the type selector to establish a baseline of general styles that enforce your brand’s visual identity through consistency.
• Use classes (and sometimes ids) to build on top of the base styles, to style elements based on their role in the specific environment they’re in.