What is CSS? Selectors and rules — CSS: styling

CSS: where the web gets pretty

You've got the skeleton (HTML). Now let's dress it up. CSS (Cascading Style Sheets) is the design: colors, sizes, spacing, position. And the best part: everything you write shows up instantly in the preview. It is written in rules.

Anatomy of a rule

h1 {
  color: red;
  font-size: 32px;
}

h1 is the selector: which elements the rule targets.
Inside the braces go the declarations, in property: value; pairs.

Types of selector

p            { }   /* by tag: all <p> elements */
.notice      { }   /* by class: elements with class="notice" */
#header      { }   /* by id: the element with id="header" */

Classes (.) are the workhorses: they are reused across many elements. ⚠️ Classic gotcha: forgetting the dot in .notice or the hash in #header. Without that symbol, the selector points at something else (or at nothing).

In these exercises you write the CSS and see the styled HTML in the preview. Change a color and boom, it changes on screen.