Introduction to CSS

All in one: every CSS idea of this chapter, side by side

What this example compares

Default vs styled: the same HTML with no CSS and with one rule
Colour: color vs background-color vs background, a colour name vs a hex code
The letters: font-family vs font-size vs line-height
Alignment: text-align: left vs center vs right
The parts of a rule: selector, braces, property, value, declaration; one rule for many elements
Three places: inline style="..." vs internal <style> vs external <link rel="stylesheet" href="...">
What the browser does: a selector that matches vs one that matches nothing (no error)
The cascade: later beats earlier vs more specific beats less specific vs inline
Inheritance: color and font-family pass down; border and padding do not
Comments: /* ... */ vs  vs // in CSS, and /* */ in HTML
Spacing: a rule on one line vs one declaration per line
The four mistakes: missing ;, missing }, colon and semicolon swapped, invented names - each wrong card next to its right one

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see twelve panels. Panel 1 shows the profile in plain black serif letters and again centred on a cream box (the link stays blue in both). Panel 2 shows green and amber letters, then two cream boxes that look the same. Panel 3 shows one sentence in six ways: default, Georgia, the system font, bigger, slightly bigger, and with airy lines. Panel 4 places "Welcome" left, centre and right. Panel 5 shows two teal, centred headings made by one h1 rule and two navy paragraphs. Panel 6 shows a green inline line, an amber internal one and a teal external one. In panel 7 only the first card is cream. Panel 8 shows blue, then red beside green, then teal. Panel 9 shows purple Georgia text, then one border, then the same border with more space inside. In panel 10 cards 1 and 4 stay black, card 3 is red and card 5 prints /* I am on the screen */. The two "Same" words in panel 11 match exactly, and in panel 12 each RIGHT card is navy while the WRONG card before it stays black (in the brace pair, only line 1 of the wrong card is navy). There is no JavaScript, so the Console stays empty.

Quick check: in panel 8, the b rule is written after .chosen. Why is "This b is chosen" still green?

Because .chosen is more specific: it aims at one element, while b aims at every <b>. "Later wins" only breaks a tie between equally specific rules. Inline style="..." is more specific still, which is why card 3 is teal.