What CSS Is and Where It Goes

5 min reading
5 min activity

Unit 3CSS

0 of 5 tasks doneup to 95 XP

Remember: the head of a page10 XPOptional
Anatomy of a rule10 XPTo do
Inline, internal or external?15 XPTo do
First rules30 XPTo do
Slide bug: the inline style30 XPTo do

Your website from Unit 2 has all its parts. Now you decide how it looks. Mission 3, "Make it yours", starts today.

In this lesson

Say what CSS does and what "cascading" means.
Read a CSS rule: selector, property and value.
Add CSS in three places: inline, in a <style> tag and in an external file.
Write a comment in CSS.

Remember

In lesson 1.3 you met the tags that live in the head of a page. One of them connects your page to other files.

Quick check

Remember: the head of a page

10 XP

A quick question from Unit 1. It is optional.

What CSS is

CSS means Cascading Style Sheets. HTML says what things are: a heading, a list, a link. CSS says how they look: colours, fonts, sizes and places on the page. One CSS rule can change the font, colour and size of the text in every <p> tag at once.

A style is a set of settings with a name: you make it once and use it on many elements. "Cascading" means that several rules can fit the same element, and the browser decides which one wins (lesson 3.4).

A small correction

One course slide writes "Cascade Style Sheet". The full name is Cascading Style Sheets.

The parts of a rule

A CSS rule has a selector and one or more declarations. A declaration is a property, a colon and a value. It ends with a semicolon.

/* Main headings: dark blue and big */
h1 {
  color: navy;
  font-size: 32px;
}

Go through the rule one part at a time.

Step by step

Anatomy of a rule

Required 10 XP

Go through the rule h1 { color: navy; } one part at a time.

Comments and spelling

Text between /* and */ is a comment: a note for you that the browser skips. CSS uses American spelling. Our text writes "colour" and "centre", but code always color and center.

Three places for CSS

Worked example

Inline: one element
Write the CSS in the style attribute of one tag. It changes only this element.
```
<p style="color: darkred;">This text is dark red.</p>
```

Internal: one page

Write the rules between <style> and </style> in the head. They work on this page only.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Internal CSS example</title>
  <style>
    body {
      background-color: #f4f4f4;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #2c3e50;
      text-align: center;
    }
  </style>
</head>

External: many pages
Write the rules in a separate file, for example style.css. Then connect the file in the head of every page with a <link> tag.
```
<link rel="stylesheet" href="style.css">
```

One stylesheet for many pages. Change style.css once, and every page that links it changes.

For a website, an external file is the best choice. In this course, the CSS tab of each exercise is your style.css. The internal example also has the viewport tag from lesson 1.3, so it reads well on a phone.

Grouping

Inline, internal or external?

Required 15 XP

Your turn: first rules

Guess first, then press Run. On a phone, open the CSS tab and tap the code buttons above the editor.

Practice

First rules

Required 30 XP

Your first stylesheet. Open the CSS tab and write three rules: a colour for the heading (not black), the heading in the centre, and paragraph text of 18px.

Slide bug: the inline style

A course slide shows an inline style with two small problems. Can you find them?

Practice

Slide bug: the inline style

Required 30 XP

This code comes from a course slide. It has a small bug. Find it and fix it. On the slide the quotes were curly; the editor already changed them into straight quotes.

CSS: Cascading Style Sheets: the language for the look of a web page.
Rule: A selector and its declarations in curly braces.
Selector: The part before {. It chooses the elements, for example h1.
Declaration: One property: value; line.
Property: What you change, for example color.
Value: How you change it, for example navy.
Stylesheet: A CSS file, like style.css.

In short

HTML says what things are; CSS says how they look.
A rule is a selector, then property: value; declarations in curly braces.
CSS can go in a style attribute (one element), in <style> (one page) or in an external file linked with <link> (many pages).

Next time

Colours, backgrounds and fonts. You also make sure that everybody can read your text.

Sources

MDN Web Docs (2026). What is CSS? (what CSS does; rules, selectors, declarations).
MDN Web Docs (2026). CSS syntax (property, value, declaration, semicolon).
MDN Web Docs (2026). Comments (/* */).
MDN Web Docs (2026). Handling conflicts (the cascade: which rule wins).
MDN Web Docs (2026). <link> (rel="stylesheet").
MDN Web Docs (2026). <style> (internal CSS in the head).
MDN Web Docs (2026). style attribute (inline CSS for one element).

End of the lesson

This lesson: 0 of 105 XP

Code Cards in this lesson: 3

CSS
selector { property: value; }
/* */

Next: Colours, Backgrounds and Fonts