What CSS is

HTML gives a web page its structure — the headings, paragraphs, and images. But raw HTML looks plain: black text on a white background, default fonts, no layout. CSS is what makes it look good. Colours, fonts, spacing, layout, animations — every beautiful website you've seen owes its appearance to CSS.

CSS styles what HTML structures

If HTML is the structure of a house (walls, rooms, doors), CSS is the decoration (paint, furniture, layout). HTML says "this is a heading"; CSS says "make headings dark blue, large, and centred." They work as a pair: HTML for content and meaning, CSS for how it all looks.

See the difference

Here's the same HTML, first plain, then with a little CSS. Press Run and watch:

Delete the whole <style> block and run again — you get plain black-on-white HTML. That gap, between plain and polished, is entirely CSS. You didn't change the content at all; you changed how it looks.

Why CSS is powerful

• Separation of concerns — content (HTML) stays separate from appearance (CSS). Change the look without touching the structure.
• Reuse — one CSS rule can style every heading on every page at once. Change it in one place, and the whole site updates.
• Control — CSS handles everything visual: colour, typography, spacing, layout, responsiveness (looking good on phones and desktops), and even animation.

The three-part team

You now know two of the three web languages:

• HTML — structure and content (you've learned this).
• CSS — appearance and layout (this course).
• JavaScript — behaviour and interactivity (later).

CSS is the step that turns your plain HTML pages into designed ones — often the most satisfying part of learning web development, because the results are so visible.

Your turn

Your turn

1. Run the first example, then delete the