What CSS is
HTML says what is on a page; CSS says how it looks. Write one CSS rule, link the stylesheet from the HTML, and watch the browser match the rule's selector to the heading and apply each declaration in turn: a new colour, a bigger size, wider letter spacing. Then change only the CSS and see the same HTML take a new look.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01Which job does CSS do on a web page?
HTML is the content (a heading, a paragraph). CSS is the style: how that content looks.
02In the rule h1 { color: tomato; }, what is h1?
The selector comes first and picks which elements the rule styles. h1 picks every h1 element on the page.
03In the declaration font-size: 48px;, which part is the property?
A declaration is a property, a colon, a value and a semicolon. font-size is the property and 48px is its value.
04How does a page start using style.css?
A page only uses CSS it asks for. The link element, inside <head>, tells the browser to fetch style.css and apply its rules.
05The page has an h1 and a p. Which elements does the rule h1 { color: tomato; } change?
The browser checks the selector against every element. h1 matches the heading only; the paragraph is a p, so the rule leaves it alone.
Glossary
- CSS
- Cascading Style Sheets: the language that says how HTML content looks, such as colours, sizes and spacing.
- Stylesheet
- A file of CSS rules, such as style.css. One stylesheet can style many pages.
- Rule
- A selector followed by declarations in curly braces: h1 { color: tomato; }.
- Selector
- The part of a rule that picks which elements to style. h1 picks every h1 element.
- Declaration
- One property and its value, ending with a semicolon: color: tomato;.
- Property
- What a declaration changes, such as color, font-size or letter-spacing.
- Value
- What the property is set to, such as tomato or 48px.
- Element
- One part of a page the browser makes from an HTML tag, such as the heading made from <h1>.
Notes and sources
- A real browser applies all of a rule's declarations at once, while it works out the style of every element. The figure applies them one at a time so you can see what each one does.
- Without any CSS the browser still has a built-in stylesheet. It makes h1 bold, twice the normal size and gives it space above and below; the page drawing follows those defaults approximately.
- The cards show only the lines that matter. The full index.html also has <!DOCTYPE html>, <html>, <head> with a <title>, and <body>; the <link> goes inside <head>.
- Save the full page as index.html and the rule as style.css in the same folder, open index.html in a browser, and the heading appears in tomato, 48px, 4px apart.
Quiz Unlocks after the last step.