If HTML is the skeleton of a web page, CSS is its skin, clothes and style. Every colour, font, spacing and layout you see online is CSS at work. It is the difference between a plain wall of text and a designed website — and it is genuinely fun to learn.
What CSS is
CSS stands for Cascading Style Sheets. It is the language that describes how HTML elements should look — their colour, size, spacing, position and motion. HTML says "this is a heading"; CSS says "make headings dark blue, large, with space below". Structure and style stay cleanly separated.
Why CSS matters
Without CSS, every website would look like a 1995 text document. CSS lets one HTML page look completely different depending on the styles applied — the same content can be a blog, a dashboard or a landing page. It also keeps code maintainable: change one CSS file and your whole site updates.
The anatomy of a CSS rule
Every rule has the same shape: a selector that picks elements, then declarations inside braces. Each declaration is a property and a value.
h1 { color: teal; font-size: 32px; }- Selector
h1 - Property
color - Value
teal - Declaration
color: teal;
<h1>Styled heading</h1>
<p>A styled paragraph.</p>h1 { color: teal; }
p { color: #555; font-size: 18px; }In the example, change the h1 colour to "crimson" and make the paragraph font-size 20px. Watch the preview react instantly.
h1 {
color: teal
font-size: 32px;
}h1 {
color: teal;
font-size: 32px;
}Forgetting the semicolon ends a declaration. Without it, the next declaration is ignored.
Keep structure in HTML and all styling in CSS. Mixing them with inline styles everywhere makes pages hard to maintain — separation is the professional habit.
1. What does CSS do?
2. In "color: teal;", what is "color"?
3. What picks which elements a rule styles?
- CSS styles how HTML looks — colour, type, spacing, layout, motion.
- A rule = selector + declarations (property: value;).
- It keeps content and presentation separate and maintainable.
- End every declaration with a semicolon.