CSS Fundamentals

The anatomy of a CSS rule

Every CSS rule has a selector and a declaration block. Inside the block you write property: value; pairs.

selector {
  property: value;
}

The core selectors

• Type: p targets every paragraph.
• Class: .badge targets elements with class="badge". Reusable.
• ID: #title targets the single element with id="title". Unique.
• Grouping: h1, h2 applies the same rule to several selectors.
• Descendant: nav a targets links inside a nav.

Specificity in one line

When rules conflict, an ID beats a class, and a class beats a type selector. Keep selectors as simple as the job allows.