Why Element selectors in CSS? - Purpose & Use Cases

The Big Idea

What if you could change the look of every paragraph on your site with just one simple rule?

The Scenario

Imagine you want to make all paragraphs on your webpage have blue text. You go through every paragraph tag and add a style attribute like style="color: blue;" manually.

The Problem

This is slow and tiring because you must find every paragraph and add the style. If you want to change the color later, you have to update each one again. It's easy to miss some and end up with inconsistent styles.

The Solution

Element selectors let you write one rule that applies to all elements of the same type automatically. For example, you write p { color: blue; } once, and every paragraph turns blue without touching each one.

Before vs After

✗ Before

<p style="color: blue;">Hello</p>
<p style="color: blue;">World</p>

✓ After

p {
  color: blue;
}

<p>Hello</p>
<p>World</p>

What It Enables

You can style all elements of the same kind quickly and consistently, saving time and avoiding mistakes.

Real Life Example

On a blog, you want all headings to have the same font and color. Using element selectors, you write one rule for all h1 tags instead of styling each heading separately.

Key Takeaways

Element selectors target all elements of a specific type.

They save time by applying styles automatically to many elements.

They keep your webpage consistent and easy to update.