Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 1 · 4 / 8CSS selectors and colours
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1CSS selectors and colours
01 / 08Overview

CSS selectors and colours

You'll learn to read a CSS rule and say which elements it styles and how.

Why it mattersEvery screen you build, on the web or the phone, is styled with rules like these.
about 90 min·needs: Common HTML elements
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Article
Getting started with CSSMDN Web Docs · 20 min · English
MMamun's noteType along in VS Code. Read until the end of "Adding a class", then stop. The rest is extra for now.
Video
HTML & CSS for absolute beginners: Creating and linking to a CSS fileKevin Powell · YouTube · 3 min · English
MMamun's noteThree minutes. Watch it if your CSS file is not changing anything. The link line is usually the reason.
ArticleOptional
Selectorsweb.dev Learn CSS · 20 min · English
MMamun's noteRead the parts on type selectors and class selectors. Skip pseudo-classes and attribute selectors for now, they come later.
03 / 08

Explanation

Your HTML says what things are. Now you want them to look good: a dark heading, a softer grey for small text, a nicer font. That is the job of CSS.

Think of the HTML as a plain school uniform. CSS is the instruction sheet: "all shirts white, house captains wear a red badge". The instruction names who it is for, then what to change.

A piece of CSS is called a rule:

h1 {
  color: #1e3a8a;
  font-family: Arial, sans-serif;
}
.note {
  color: gray;
}
  • h1 is the selector. It picks every <h1> on the page.
  • color is a property, the thing to change. #1e3a8a is its value, a dark blue.
  • .note with a dot picks every element with class="note". Classes let you style some paragraphs and not others.

Colours can be names (gray), hex codes (#1e3a8a) or rgb(30, 58, 138). They all mean the same thing.

CSS lives in its own file, like style.css. The HTML connects to it with one line in the <head>: <link rel="stylesheet" href="style.css">.

When two rules pick the same element and disagree, the more specific one wins. For now, remember one thing: a class beats a tag. If they are equally specific, the rule lower down in the file wins.

People often forget the dot. note { } looks for a <note> tag, which does not exist, so nothing happens and there is no error. Also check every line ends with a ;. One missing ; can break the next line too.

When you read CSS, read the selector first and find those elements in the HTML. Then read the properties as a list of changes.

Words to recognise
CSSruleselectorclasspropertyvaluecolourfontstylesheetspecificity
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

styles.css5 notes
body {
Mentor note · line 1
The selector body picks the whole page. Fonts and colours set here pass down to everything inside.
font-family: Arial, sans-serif;
color: #222222;
4}
5
6h1 {
color: #1e3a8a;
8}
9
.note {
11 color: gray;
12 font-size: 14px;
13}
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which selector picks <p class="price">?
  2. 2 / 3In h2 { font-size: 24px; }, what is font-size?
  3. 3 / 3p { color: black; } comes after .warning { color: red; }. What colour is <p class="warning">?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with CSS selectors and colours?

08 / 08

Done

You can now
Read a CSS file and say which elements each rule changes, and why a class rule wins over a tag rule.
Next: CSS boxes and spacing Back to Phase 1
On this page
  1. 01CSS selectors and colours
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 1How the web works
8 topics · 2–3 wks
  1. 1What happens when you open a URL
  2. 2Reading HTML structure
  3. 3Common HTML elements
  4. 4CSS selectors and colours
  5. 5CSS boxes and spacing
  6. 6Layout with flexbox
  7. 7Browser DevTools
  8. 8Put your page online
JourneyPhase 1CSS selectors and colours
01 / 08Overview

CSS selectors and colours

You'll learn to read a CSS rule and say which elements it styles and how.

Why it mattersEvery screen you build, on the web or the phone, is styled with rules like these.
about 90 min·needs: Common HTML elements
02 / 08

Watch & read

Start with the required ones. The others are there when you need them.

Article
Getting started with CSSMDN Web Docs · 20 min · English
MMamun's noteType along in VS Code. Read until the end of "Adding a class", then stop. The rest is extra for now.
Video
HTML & CSS for absolute beginners: Creating and linking to a CSS fileKevin Powell · YouTube · 3 min · English
MMamun's noteThree minutes. Watch it if your CSS file is not changing anything. The link line is usually the reason.
ArticleOptional
Selectorsweb.dev Learn CSS · 20 min · English
MMamun's noteRead the parts on type selectors and class selectors. Skip pseudo-classes and attribute selectors for now, they come later.
03 / 08

Explanation

Your HTML says what things are. Now you want them to look good: a dark heading, a softer grey for small text, a nicer font. That is the job of CSS.

Think of the HTML as a plain school uniform. CSS is the instruction sheet: "all shirts white, house captains wear a red badge". The instruction names who it is for, then what to change.

A piece of CSS is called a rule:

h1 {
  color: #1e3a8a;
  font-family: Arial, sans-serif;
}
.note {
  color: gray;
}
  • h1 is the selector. It picks every <h1> on the page.
  • color is a property, the thing to change. #1e3a8a is its value, a dark blue.
  • .note with a dot picks every element with class="note". Classes let you style some paragraphs and not others.

Colours can be names (gray), hex codes (#1e3a8a) or rgb(30, 58, 138). They all mean the same thing.

CSS lives in its own file, like style.css. The HTML connects to it with one line in the <head>: <link rel="stylesheet" href="style.css">.

When two rules pick the same element and disagree, the more specific one wins. For now, remember one thing: a class beats a tag. If they are equally specific, the rule lower down in the file wins.

People often forget the dot. note { } looks for a <note> tag, which does not exist, so nothing happens and there is no error. Also check every line ends with a ;. One missing ; can break the next line too.

When you read CSS, read the selector first and find those elements in the HTML. Then read the properties as a list of changes.

Words to recognise
CSSruleselectorclasspropertyvaluecolourfontstylesheetspecificity
04 / 08

Code tour

Click a line number with a ring to read the note for that line.

styles.css5 notes
body {
Mentor note · line 1
The selector body picks the whole page. Fonts and colours set here pass down to everything inside.
font-family: Arial, sans-serif;
color: #222222;
4}
5
6h1 {
color: #1e3a8a;
8}
9
.note {
11 color: gray;
12 font-size: 14px;
13}
05 / 08

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3Which selector picks <p class="price">?
  2. 2 / 3In h2 { font-size: 24px; }, what is font-size?
  3. 3 / 3p { color: black; } comes after .warning { color: red; }. What colour is <p class="warning">?
06 / 08

Explain it back

Only you can see this. Log in to keep it.0 words
07 / 08

How confident are you with CSS selectors and colours?

08 / 08

Done

You can now
Read a CSS file and say which elements each rule changes, and why a class rule wins over a tag rule.
Next: CSS boxes and spacing Back to Phase 1
On this page
  1. 01CSS selectors and colours
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Quick check
  6. 06Explain it back
  7. 07Confidence
  8. 08Done
Up next · 02 / 08Watch & read

Your HTML says what things are. Now you want them to look good: a dark heading, a softer grey for small text, a nicer font. That is the job of CSS.

Think of the HTML as a plain school uniform. CSS is the instruction sheet: "all shirts white, house captains wear a red badge". The instruction names who it is for, then what to change.

A piece of CSS is called a rule:

h1 {
  color: #1e3a8a;
  font-family: Arial, sans-serif;
}
.note {
  color: gray;
}
  • h1 is the selector. It picks every <h1> on the page.
  • color is a property, the thing to change. #1e3a8a is its value, a dark blue.
  • .note with a dot picks every element with class="note". Classes let you style some paragraphs and not others.

Colours can be names (gray), hex codes (#1e3a8a) or rgb(30, 58, 138). They all mean the same thing.

CSS lives in its own file, like style.css. The HTML connects to it with one line in the <head>: <link rel="stylesheet" href="style.css">.

When two rules pick the same element and disagree, the more specific one wins. For now, remember one thing: a class beats a tag. If they are equally specific, the rule lower down in the file wins.

People often forget the dot. note { } looks for a <note> tag, which does not exist, so nothing happens and there is no error. Also check every line ends with a ;. One missing ; can break the next line too.

When you read CSS, read the selector first and find those elements in the HTML. Then read the properties as a list of changes.

Words to recognise
CSSruleselectorclasspropertyvaluecolourfontstylesheetspecificity

Your HTML says what things are. Now you want them to look good: a dark heading, a softer grey for small text, a nicer font. That is the job of CSS.

Think of the HTML as a plain school uniform. CSS is the instruction sheet: "all shirts white, house captains wear a red badge". The instruction names who it is for, then what to change.

A piece of CSS is called a rule:

h1 {
  color: #1e3a8a;
  font-family: Arial, sans-serif;
}
.note {
  color: gray;
}
  • h1 is the selector. It picks every <h1> on the page.
  • color is a property, the thing to change. #1e3a8a is its value, a dark blue.
  • .note with a dot picks every element with class="note". Classes let you style some paragraphs and not others.

Colours can be names (gray), hex codes (#1e3a8a) or rgb(30, 58, 138). They all mean the same thing.

CSS lives in its own file, like style.css. The HTML connects to it with one line in the <head>: <link rel="stylesheet" href="style.css">.

When two rules pick the same element and disagree, the more specific one wins. For now, remember one thing: a class beats a tag. If they are equally specific, the rule lower down in the file wins.

People often forget the dot. note { } looks for a <note> tag, which does not exist, so nothing happens and there is no error. Also check every line ends with a ;. One missing ; can break the next line too.

When you read CSS, read the selector first and find those elements in the HTML. Then read the properties as a list of changes.

Words to recognise
CSSruleselectorclasspropertyvaluecolourfontstylesheetspecificity