🎨 CSS Basics

CSS Syntax

A CSS rule has three parts: a selector (what to style), a property (what to change), and a value (what to change it to).

selector { property: value; }

Example: h1 { color: blue; font-size: 2rem; }

Selectors

• h1 — element selector (all <h1> tags)
• .card — class selector (all elements with class="card")
• #hero — ID selector (the element with id="hero")
• nav a — descendant selector (links inside nav)
• a:hover — pseudo-class (links being hovered)

The Cascade and Specificity

When multiple rules target the same element, the browser uses specificity to decide which wins. IDs beat classes; classes beat element selectors. If specificity ties, the rule written last in the CSS wins (the "cascade").

Specificity score: id=100, class=10, element=1. Add up all selectors to get the score.

Color, Fonts, and Backgrounds

Colors: named (red), hex (#3b82f6), RGB (rgb(59,130,246)), or HSL (hsl(217,91%,60%)).

Fonts: font-family, font-size (rem preferred), font-weight, line-height, text-align.

Backgrounds: background-color, background-image: url(), background-size: cover.