In the architecture of a website, HTML provides the structure (the beams and bricks), and CSS provides the style (the paint, furniture, and finishes). The bridge between these two languages is the CSS selector. The most fundamental and widely used of these is the tag selector, also known as a type selector.

Mastering tag selectors is the first and most crucial step in writing clean, maintainable, and efficient CSS. They are the "broad strokes" that define the default look and feel of your entire website before you add finer details.

The Anatomy of a Tag Selector Rule

A CSS rule consists of two main parts: the selector and the declaration block.

h1 {
  color: #333;
  font-size: 2.5rem;
}

• Selector (h1): This is the tag selector. It targets every single <h1> element on the page.
• Declaration Block ({ ... }): The curly braces contain one or more declarations.
• Declaration (color: #333;): A property-value pair.
• Property (color): The CSS attribute you want to change.
• Value (#333): The setting you want to apply.

Powerful Use Cases for Tag Selectors

Tag selectors are perfect for setting up a consistent, global "theme" for your site.

1. Setting a Typographic Baseline with `body`

The most common use for a tag selector is styling the body element. Because most text elements inherit properties like `font-family` and `color` from their parent, styling the `body` sets a default for the entire page.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #4a4a4a;
  background-color: #fefefe;
}

2. Styling Headings and Paragraphs (`h1`-`h6`, `p`)

Instead of styling every single heading with a class, you can set base styles for all headings and paragraphs to ensure consistent typography and spacing (vertical rhythm).

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

p {
  margin-bottom: 1rem;
}

Notice the use of grouping (,). This applies the same rule to all six heading levels, which is incredibly efficient.

3. Normalizing Link Styles (`a`)

Tag selectors are perfect for changing the default browser appearance of all links (<a>) to match your site's branding.

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

The Universal Selector (`*`)

The universal selector is a special type of selector that selects every single element on the page. It's most famously used in a "CSS reset" to change the default `box-sizing` behavior.

This single rule is arguably the most popular CSS snippet in modern web development, as it makes layout math far more intuitive:

* {
  box-sizing: border-box;
}

Tag Selectors and Specificity

This is the most important concept to understand: **tag selectors have the lowest specificity**. This is not a weakness; it is their greatest strength.

Specificity is the algorithm browsers use to decide which CSS rule applies if two or more rules target the same element.

• Tag Selector (e.g., `p`): Specificity = 0-0-1
• Class Selector (e.g., `.highlight`): Specificity = 0-1-0
• ID Selector (e.g., `#main-content`): Specificity = 1-0-0

Because 0-1-0 is "larger" than 0-0-1, a class selector **will always override** a tag selector.

p {
  color: black; /* Specificity: 0-0-1 */
}

.featured-paragraph {
  color: blue; /* Specificity: 0-1-0 */
}

If you have <p class="featured-paragraph">, it will be **blue**. The class rule wins.

Key Takeaway: Use tag selectors to set the default styles for your entire site. Then, use more specific class selectors to create variations and exceptions. This "base + modifications" strategy is the core of clean, scalable CSS.