Previous
Written by: rJTutorial Team | Last Updated:

CSS Type Selector

The type selector (also frequently called the "element selector") is the most fundamental way to target HTML elements in CSS. It matches every instance of a specific HTML tag within your document. When you use a type selector, you are telling the browser: "Find every element of this name and apply these styles to it."

For example, if you want to apply a uniform style to every paragraph (<p>) on your page to ensure consistent typography, you would use the p type selector like this:

CSS

p {
  color: #333333;
  line-height: 1.6;
  margin-bottom: 1em;
}

In this snippet, every paragraph on the page will now have dark grey text, a comfortable line height for readability, and consistent spacing at the bottom. This is much more efficient than applying classes to every single paragraph manually.

Developer Tip: The type selector is one of the fastest selectors for a browser to process. Because it maps directly to the HTML tag name, the browser's engine can find and style these elements incredibly quickly.

When to Use Type Selectors

Type selectors are perfect for defining "base styles" or global defaults for your website. Instead of styling individual components one by one, you use type selectors to establish how your site looks by default. Common use cases include:

  • Setting a default font family on the <body>.
  • Standardizing margins for <h1> through <h6> headings.
  • Setting a default border-collapse for all <table> elements.
  • Removing default bullets from <ul> lists.
Best Practice: Use type selectors to create a "CSS Reset" or "Normalization" layer. By defining how standard tags like <button>, <input>, and <a> look globally, you ensure a consistent baseline across different browsers.

Real-World Example: Improving Typography

Imagine you are building a blog. You want all your headers to be blue and all your images to have a slight rounded corner. Instead of adding a .blog-heading class to every title, you can simply write:

h2 {
  color: #0056b3;
  font-family: 'Helvetica', sans-serif;
  border-bottom: 2px solid #eeeeee;
}

img {
  max-width: 100%;
  border-radius: 8px;
}
Common Mistake: Using a type selector when you only want to style one specific instance. For example, if you style the <nav> tag globally but then add a second <nav> in your footer, both will receive the same styles. In these cases, a class selector is usually a better choice.

Specificity and the Cascade

Type selectors have the lowest "specificity" (weight) of all selectors (excluding the universal selector *). This means that a class selector (like .main-text) or an ID selector (like #header) will easily override any styles defined by a type selector. This is actually a good thing! It allows you to set broad defaults that are easy to "opt-out" of later by adding a specific class to an element.

Watch Out: Be careful with overly broad type selectors like div or span. Since these elements are often used for layout and wrapping, styling them globally can lead to unexpected visual bugs in your UI that are difficult to track down.
Previous