CSS Selectors: Element, ID, and Class

CSS

"Learning CSS is like solving a puzzle—except if one piece is out of place, your entire website ends up looking like a closet hit by a tornado!"

 

The Power of CSS Selectors

CSS selectors are like magic spells that tell your website which elements to style. There are three main types:

1. Element Selectors – Style all elements of the same type 
2. ID Selectors – Style one specific element 
3. Class Selectors – Style multiple elements with the same class 

Let’s break them down so you can become a CSS wizard! 

Element Selector: Styling by Tag Name

The element selector targets all instances of a specific HTML tag.

Example:

p {
  color: blue;
  font-size: 18px;
}

HTML:

<p>This paragraph will be blue and 18px.</p>
<p>So will this one!</p>

• Simple and effective.
• Affects all elements of that type, which might be too broad.

It’s like telling every paragraph on your site to wear the same blue outfit.

ID Selector: Styling One Special Element

An ID selector targets only one unique element using #.

Example:

#unique-title {
  color: red;
  font-size: 24px;
}

HTML:

<h1 id="unique-title">This is a unique heading!</h1>

• Great for one-time styling.
• IDs must be unique—don’t reuse them!

Think of IDs like VIP passes: one per person! 

Class Selector: The Flexible Way to Style Multiple Elements

Class selectors let you style multiple elements using ..

Example:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

HTML:

<p class="highlight">This text is highlighted!</p>
<p class="highlight">So is this one!</p>

• Perfect for styling multiple elements.
• More flexible than ID selectors.

A class is like giving multiple people the same cool T-shirt. 

Conclusion: When to Use Each Selector? 

• Element Selector – When styling all elements of the same type. 
• ID Selector – When styling one unique element. 
• Class Selector – When styling multiple elements with the same look.

Master these, and your CSS skills will level up in no time!