Add CSS to a page
What CSS does
Understand how CSS turns structured HTML into a visual interface while keeping content, meaning, and presentation separate.
5 minute lesson
HTML gives a page structure and meaning. CSS supplies constraints for presenting that structure.
The browser already has a user-agent stylesheet. That is why headings are large and links are underlined before you write CSS. Your declarations join browser defaults, user preferences, and element state in the cascade.
h1 {
color: navy;
font-size: 3rem;
}This rule selects every h1, but it does not directly draw pixels. The browser roughly:
- matches applicable selectors
- runs the cascade to find one value per property
- computes inherited and relative values
- performs layout using the content and available space
- paints the result
CSS is therefore not a drawing program with fixed coordinates. It describes constraints: how wide a box may become, how siblings share space, what happens when text grows, and which declaration wins when rules disagree.
Open DevTools and inspect the heading. The Styles panel shows matched and overridden declarations. Computed styles show the winning values. The Layout or box-model panel shows the size produced after layout.
Change the text, narrow the viewport, and increase the root font size. Good CSS continues to produce a usable page because its constraints respond to content instead of assuming one screenshot.
Lesson completed