CSS Selectors Basics

Selectors tell CSS which HTML elements to style.

Element selector

Styles all elements of one type.

p {
  color: gray;
}

Class selector

Styles elements with a specific class.

HTML:

<p class="note">Important</p>

CSS:

.note {
  color: red;
}

ID selector

Styles one unique element.

HTML:

<h1 id="title">Home</h1>

CSS:

#title {
  font-size: 32px;
}

Real world tip

• class → reusable
• id → unique
• element → general styling

UI imagination

• class is like a label
• id is like a CNIC (unique)

Remember

• Use class most of the time
• Avoid overusing id