What is CSS? Styling your first text

1. What is this?

CSS (Cascading Style Sheets) is a language that describes how HTML looks. A rule has three parts: a selector (which elements to style), a property (what to change, e.g. color), and a value (what to set it to, e.g. red). Example: h1 { color: red; } means: find every h1, set its text colour to red.

2. Why do we use it?

Unstyled HTML is readable but plain and hard to scan. CSS controls spacing, contrast, and hierarchy — the difference between a wall of text and a page people can use.

3. Syntax breakdown

• h1 { color: black; }

  h1 = selector (all top headings). color = property. black = value. Semicolon ends the declaration.

• p { font-size: 16px; }

  Selects all paragraphs, sets text size to 16 pixels.

• /* a comment */

  Comments explain your CSS and are ignored by the browser.

5. Common mistakes

• Forgetting the semicolon between declarations — the next line gets ignored.
• Writing color: #111 without the hash — hex colours need it.
• Styling with element names when you meant one specific block (use a class).

Practice task

Make the heading 40px and the paragraph colour #222. Add a line-height of 1.8 to the paragraph.

Press Run to see output.

Mini quiz

3 questions. Answer, then check.

1. 1. In h1 { color: red; }, what is h1?

   The selectorThe propertyThe value

2. 2. What does the property describe?

   What to change (e.g. color)Which element to pickThe HTML file name

3. 3. What ends a CSS declaration?

   A semicolonA commaAn indent