Lesson 01: Introduction to CSS · What It Is, Why It Exists, and How It Works

Phase 1 of 10

Lesson Introduction

Welcome! In this lesson, you will take your very first steps into the world of CSS · one of the most important technologies used to build websites and web applications.

By the time you finish this lesson, you will be able to:

Explain what CSS is and why it was created
Understand how CSS and HTML work together
Write a complete, correct CSS rule from memory
Know the names and roles of every part of a CSS rule
Spot and fix common CSS mistakes
Apply CSS to a real mini-project

You do not need any previous knowledge to start. This lesson will teach you everything from the ground up. Even if you have never written a single line of code before, you are in the right place.

✏️ Your Task

Practise what you just learned about Lesson Introduction. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 2 of 10

Prerequisite Concepts · Things You Need to Know First

Before we dive into CSS, we need to briefly explain one idea that CSS depends on: HTML.

What is HTML?

HTML stands for HyperText Markup Language. It is the language used to build the structure of a web page · like the skeleton of a building. It defines things like headings, paragraphs, images, and links.

Here is a simple HTML example:

html

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

What does this produce?

code

Hello, World!
This is a paragraph of text.

The page appears plain and unstyled · just raw black text on a white background. It has structure, but no design. That is where CSS comes in.

💡 Analogy: Think of HTML as the bricks and concrete of a building (structure), and CSS as the paint, wallpaper, and furniture (appearance).

✏️ Your Task

Practise what you just learned about Prerequisite Concepts · Things You Need to Know First. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 3 of 10

Section 1 · What Is CSS?

The Simple Definition

CSS stands for Cascading Style Sheets.

CSS is the language used to control how HTML elements look on a screen, on a printed page, or in any other display medium.

Without CSS, every webpage would look like a plain, unstyled document · like a Word document with no formatting. CSS is what makes websites look colourful, professional, and beautiful.

Breaking Down the Name

Let us look at each word in "Cascading Style Sheets" so you understand exactly what it means:

Cascading · CSS rules can come from multiple places (your file, the browser's defaults, inline styles). The word "cascading" describes how these rules flow together and how conflicts between them are resolved. We will learn more about this later.
Style · CSS controls the visual style: colours, fonts, sizes, spacing, layout, and more.
Sheets · CSS rules are usually written in a separate file (a "sheet"), though they can also appear inside an HTML file.

What Can CSS Control?

CSS can control almost every visual aspect of a webpage, including:

Colours · background colour, text colour, border colour
Fonts · font family, font size, bold, italic
Layout · where elements sit on the page, how wide they are, how much space surrounds them
Spacing · the gap inside an element (padding) and outside an element (margin)
Borders · lines drawn around elements
Animations · moving and transitioning elements smoothly
Responsive design · making pages look good on phones, tablets, and desktops

CSS Saves a Huge Amount of Work

Here is one of the most important things to understand about CSS: a single CSS file can control the appearance of an entire website · dozens or hundreds of pages at once.

Imagine you have a website with 100 pages and you want to change the colour of all your headings from black to blue. Without CSS, you would need to open every single page and change each heading individually. With CSS, you open one CSS file, change one line, and every page on your website updates automatically.

This is why CSS exists. It separates the content (HTML) from the design (CSS), making large websites much easier to manage.

✏️ Your Task

Practise what you just learned about What Is CSS?. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 4 of 10

Section 2 · CSS and HTML: How They Work Together

Think of building a webpage like decorating a room:

HTML = the walls, furniture, and objects in the room
CSS = the paint on the walls, the colour of the furniture, the size of the windows

HTML creates the things on the page. CSS decides how those things look.

A Real-World Analogy

Imagine a restaurant menu. The words on the menu (dish names, descriptions, prices) are like HTML · they are the content. But whether those words appear in a fancy gold font on dark paper, or in plain black on white paper, or in a big red title · that is like CSS. The content is the same; only the presentation changes.

Seeing CSS In Action

Look at the same HTML page below, first without CSS and then with CSS applied:

HTML only (no CSS):

html

<h1>Welcome to My Bakery</h1>
<p>We bake fresh bread every morning.</p>

Output (no CSS):

code

Welcome to My Bakery
We bake fresh bread every morning.

Plain, black text. No colour. No personality.

Same HTML with CSS applied:

css

h1 {
  color: darkred;
  font-size: 36px;
  text-align: center;
}

p {
  color: gray;
  font-size: 18px;
  font-family: Georgia, serif;
}

Output (with CSS):

The heading appears large, dark red, and centred. The paragraph appears smaller, grey, and in an elegant serif font. Same HTML content · completely different visual experience.

💡 Thinking Prompt: What would happen if you changed color: darkred to color: blue? The heading would appear blue instead. CSS gives you that kind of control instantly.

✏️ Your Task

Practise what you just learned about CSS and HTML: How They Work Together. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 5 of 10

Section 3 · CSS Syntax: The Grammar of CSS

Every programming language or styling language has a syntax · a set of rules about how you must write your code so the computer understands it. CSS syntax is very simple and follows a consistent pattern.

The Three Parts of a CSS Rule

A complete CSS instruction is called a CSS rule. Every CSS rule is made up of exactly three parts:

Selector · tells CSS which HTML element to style
Property · tells CSS what aspect to change (colour, size, font, etc.)
Value · tells CSS how to change it (red, 20px, bold, etc.)

Here is the pattern:

code

selector {
  property: value;
}

And here is a real example:

css

p {
  color: red;
}

Let us break every character down:

Part	What it is	What it does
`p`	Selector	Targets all `<p>` (paragraph) HTML elements
`{`	Opening curly brace	Opens the "instruction block" · everything inside applies to the selector
`color`	Property	The visual aspect we want to change · in this case, the text colour
`:`	Colon	Separates the property name from its value
`red`	Value	The specific setting for the property · make the text red
`;`	Semicolon	Marks the end of this one declaration. Required if there are more below it.
`}`	Closing curly brace	Closes the instruction block

The Correct Terms to Know

CSS professionals use specific words for these parts:

The selector + { ... } together is called a CSS rule (or "rule set")
The part inside the curly braces is called the declaration block
Each single property: value; line inside the block is called a declaration
The word on the left of the colon (:) is the property
The word on the right of the colon (:) is the value

css

/* Full structure labelled: */

p              /* ← SELECTOR */
{              /* ← Opening brace of DECLARATION BLOCK */
  color: red;  /* ← DECLARATION (property: value;) */
}              /* ← Closing brace of DECLARATION BLOCK */

Multiple Declarations in One Rule

You can write as many declarations as you want inside one rule block. Each declaration must end with a semicolon (;).

Example with three declarations:

css

p {
  color: red;
  text-align: center;
  font-size: 20px;
}

What this does:

color: red; · makes the text red
text-align: center; · centres the text horizontally
font-size: 20px; · makes the text 20 pixels tall

Expected Output: All paragraphs (<p> elements) on the page appear with red text, centred, at a size of 20 pixels.

💡 Thinking Prompt: What would happen if you removed the semicolon after color: red? Many browsers will still understand it if it is the last declaration, but it is considered bad practice and can cause bugs when you add more declarations later. Always use semicolons.

Multiple Rules for Different Selectors

You can write as many CSS rules as you need · one for each type of HTML element you want to style:

css

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Breaking this down line by line:

body { background-color: lightblue; } · The body selector targets the entire webpage. This makes the whole page background light blue.
h1 { color: white; text-align: center; } · Targets all <h1> (biggest heading) elements. Makes them white and centred.
p { font-family: verdana; font-size: 20px; } · Targets all <p> (paragraph) elements. Sets their font to Verdana and their size to 20px.

Expected Output: A webpage with a light blue background, white centred headings, and paragraphs in Verdana at 20px.

✏️ Your Task

Practise what you just learned about CSS Syntax: The Grammar of CSS. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 6 of 10

Section 4 · Understanding Each Part in Depth

4.1 · The Selector

The selector is the part of a CSS rule that says "which HTML element should this rule apply to?"

Think of it like the name tag at a job site. If you want all the painters to wear blue uniforms, you write a rule targeted at "painters". If you want all the electricians to wear yellow uniforms, you write a separate rule for "electricians".

The most basic type of selector is the element selector · it simply names the HTML tag you want to style.

Simple element selectors:

css

/* Target all <h1> elements */
h1 {
  color: navy;
}

/* Target all <p> elements */
p {
  color: darkgray;
}

/* Target all <body> elements (the whole page) */
body {
  background-color: ivory;
}

📌 Important: In the CSS selector, you do NOT include the angle brackets (< and >). You write p, not <p>. You write h1, not <h1>.

What happens with an element selector?

When you write h1 { color: blue; }, CSS finds every single <h1> element in your entire HTML document and makes all of them blue. One rule, multiple elements · that is the power of CSS.

4.2 · The Property

The property is the name of the visual aspect you want to change.

CSS has hundreds of properties. Here are some of the most common ones you will use:

Property	What it controls	Example value
`color`	Text colour	`red`, `blue`, `#ff0000`
`background-color`	Background colour	`lightblue`, `white`
`font-size`	How large the text is	`16px`, `2em`
`font-family`	Which font to use	`Arial`, `Georgia`
`text-align`	Left, centre, or right alignment	`center`, `left`, `right`
`border`	Line around an element	`1px solid black`
`margin`	Space outside an element	`20px`, `auto`
`padding`	Space inside an element	`10px`
`width`	How wide the element is	`300px`, `50%`
`height`	How tall the element is	`200px`

Properties always go on the left side of the colon (:).

4.3 · The Value

The value tells CSS exactly how to apply the property. It always goes on the right side of the colon (:).

Different properties accept different types of values:

Colour values: red, blue, lightblue, #ff0000, rgb(255, 0, 0)
Size values: 20px, 1.5em, 50%, 2rem
Text values: center, left, bold, italic
Font values: Arial, Georgia, sans-serif

Example · showing different value types:

css

h2 {
  color: navy;           /* colour keyword */
  font-size: 24px;       /* pixel size */
  text-align: center;    /* alignment keyword */
  font-family: Arial;    /* font name */
}

Expected Output: All <h2> headings appear navy blue, 24px tall, centred, in the Arial font.

4.4 · Curly Braces `{ }`

The curly braces { and } are like a container or a box. Everything you put inside them belongs to the selector above them.

{ opens the container
} closes the container

Never forget to close your curly brace! A missing } is one of the most common CSS mistakes and can break every rule below it.

4.5 · The Colon `:`

The colon separates the property name from its value. There must always be a colon between them.

css

/* Correct */
color: red;

/* Wrong - no colon */
color red;

/* Wrong - semicolon instead of colon */
color; red;

4.6 · The Semicolon `;`

The semicolon marks the end of each declaration. It acts like a full stop in a sentence. Without it, CSS does not know where one declaration ends and the next one begins.

css

p {
  color: red;       /* ← semicolon here */
  font-size: 18px;  /* ← semicolon here */
  text-align: left; /* ← semicolon here (good habit, even on the last line) */
}

💡 Best Practice: Always put a semicolon after every declaration, including the last one. It is technically optional on the last one, but if you always do it, you will never accidentally introduce a bug when you add another line later.

✏️ Your Task

Practise what you just learned about Understanding Each Part in Depth. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 7 of 10

Section 5 · Simple Standalone Examples

Let us look at several complete, working examples from the very simplest to slightly more complex.

Example 1 · Styling a Heading (Most Basic Possible)

CSS:

css

h1 {
  color: blue;
}

HTML:

html

<h1>Hello, World!</h1>

Expected Output: The text "Hello, World!" appears in blue.

What happened?

Selector: h1 · targets the <h1> element
Property: color · controls the text colour
Value: blue · makes it blue

Example 2 · Changing the Background

CSS:

css

body {
  background-color: lightyellow;
}

HTML:

html

<body>
  <p>This page has a light yellow background.</p>
</body>

Expected Output: The entire webpage background becomes light yellow.

What happened?

body is the selector · it targets the <body> tag which wraps the entire page
background-color is the property · controls the background
lightyellow is the value · a pale yellow colour

Example 3 · Styling a Paragraph

CSS:

css

p {
  font-size: 20px;
  color: darkgreen;
  text-align: center;
}

HTML:

html

<p>This paragraph is styled with CSS.</p>

Expected Output: The paragraph text appears dark green, 20 pixels tall, and centred.

Line-by-line explanation:

font-size: 20px; · makes the text 20 pixels high. px stands for "pixels" · tiny dots on your screen.
color: darkgreen; · sets the text colour to dark green
text-align: center; · centres the text horizontally within the page

Example 4 · Multiple Rules for Multiple Elements

CSS:

css

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

HTML:

html

<body>
  <h1>My Website</h1>
  <p>Welcome to my page. This text is in Verdana font.</p>
</body>

Expected Output:

The whole page background is light blue
The heading "My Website" is white and centred
The paragraph uses Verdana font at 20px

💡 Thinking Prompt: Can you predict what would happen if you added color: navy; as a new declaration inside the p { } rule? The paragraph text would appear navy blue.

✏️ Your Task

Practise what you just learned about Simple Standalone Examples. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 8 of 10

Section 6 · Guided Practice Exercises

🎯 Your Challenge

These exercises will help you build confidence by writing real CSS rules.

Exercise 1 · Warm-Up: Your First CSS Rule

Objective: Write a CSS rule that makes all <h1> headings appear in the colour coral.

Scenario: You are building a webpage for a surf shop. The owner wants the main heading to stand out in a vibrant colour.

Steps:

Identify the selector. Which HTML element are we targeting? → h1
Identify the property. What aspect are we changing? → color
Identify the value. What colour do we want? → coral
Write the rule using correct CSS syntax.

Your Answer Should Look Like:

✏️ Task

Practise what you just learned about Guided Practice Exercises. Open your editor, type the examples above by hand, modify them, and observe what changes.

css

h1 {
  color: coral;
}

Expected Output: All <h1> elements on the page appear in the colour coral (a warm pinkish-orange).

Self-Check Questions:

Did you use curly braces { }?
Did you use a colon : between the property and value?
Did you end the declaration with a semicolon ;?

Exercise 2 · Multiple Declarations

Objective: Style a paragraph so it uses the Georgia font, has a font size of 18px, and dark gray text colour.

Scenario: You are designing a blog post page. The reading text needs to be elegant and easy to read.

Steps:

Selector → p
You need three declarations:

- Font family → font-family: Georgia; - Font size → font-size: 18px; - Text colour → color: darkgray;

Your Answer Should Look Like:

css

p {
  font-family: Georgia;
  font-size: 18px;
  color: darkgray;
}

Expected Output: All paragraphs use the Georgia font, are 18 pixels tall, and appear in dark gray.

Self-Check Questions:

Does each declaration end with a semicolon?
Is the entire block wrapped in curly braces?

Exercise 3 · Page Background and Heading Together

Objective: Create two CSS rules: one that gives the whole page a lightgray background, and one that makes <h2> headings appear darkblue and centred.

Scenario: You are creating a simple company profile page and want a clean, professional look.

Steps:

Write a rule for body → background-color: lightgray;
Write a second rule for h2 → color: darkblue; and text-align: center;

Your Answer Should Look Like:

css

body {
  background-color: lightgray;
}

h2 {
  color: darkblue;
  text-align: center;
}

Expected Output: The whole page has a light gray background. All <h2> headings are dark blue and centred.

What-If Challenge: What would happen if you changed text-align: center; to text-align: right;? The headings would shift to the right side of the page.

Exercise 4 · Build a Full Simple Stylesheet

Objective: Write a complete stylesheet with rules for body, h1, h2, and p.

Scenario: You are building a simple recipe page. Use this specification:

Page background: #fff5e6 (a warm cream colour)
h1: colour saddlebrown, centred
h2: colour sienna, font size 22px
p: font family Arial, font size 16px, colour #333

Your Answer Should Look Like:

css

body {
  background-color: #fff5e6;
}

h1 {
  color: saddlebrown;
  text-align: center;
}

h2 {
  color: sienna;
  font-size: 22px;
}

p {
  font-family: Arial;
  font-size: 16px;
  color: #333;
}

Expected Output: A warm cream-coloured page with brown headings and dark gray body text · perfect for a recipe page.

📌 Note about #333: This is a colour written in hexadecimal format · a way of describing colours using numbers and letters. #333 is a very dark gray. You do not need to fully understand hex colours yet · just know they are another valid way to specify a colour in CSS.

Phase 9 of 10

Section 7 · Common Beginner Mistakes (and How to Fix Them)

These are the mistakes that almost every beginner makes at least once. Knowing them in advance will save you a lot of frustration.

Mistake 1 · Missing Curly Braces

Wrong:

css

p
  color: red;
  font-size: 18px;

Problem: There are no curly braces { }. CSS cannot tell where the declarations belong.

Correct:

css

p {
  color: red;
  font-size: 18px;
}

Mistake 2 · Missing Colon

Wrong:

css

p {
  color red;
}

Problem: There is no colon : between the property (color) and the value (red). CSS cannot understand this.

Correct:

css

p {
  color: red;
}

Mistake 3 · Missing Semicolons Between Declarations

Wrong:

css

p {
  color: red
  font-size: 18px
}

Problem: There are no semicolons after each declaration. CSS might misread these as one broken declaration.

Correct:

css

p {
  color: red;
  font-size: 18px;
}

Mistake 4 · Writing the Selector as an HTML Tag

Wrong:

css

<p> {
  color: blue;
}

Problem: CSS selectors do NOT use angle brackets. Those are only for HTML.

Correct:

css

p {
  color: blue;
}

Mistake 5 · Confusing the Colon and Semicolon

Wrong:

css

p {
  color; red:
}

Problem: The colon and semicolon are swapped. Colon always goes between property and value. Semicolon always goes at the end of a declaration.

Correct:

css

p {
  color: red;
}

Mistake 6 · Forgetting to Close the Curly Brace

Wrong:

css

h1 {
  color: navy;

p {
  font-size: 16px;
}

Problem: The h1 rule is never closed. CSS gets confused about where h1's declarations end and where p's begin. This can break everything below the missing brace.

Correct:

css

h1 {
  color: navy;
}

p {
  font-size: 16px;
}

Mistake 7 · Misspelling a Property or Value

Wrong:

css

p {
  colour: red;       /* British spelling — not valid in CSS */
  tekst-align: center; /* typo in property name */
}

Problem: CSS uses American English. colour is wrong; it must be color. And tekst-align is a typo; it must be text-align.

Correct:

css

p {
  color: red;
  text-align: center;
}

💡 Tip: CSS silently ignores rules it cannot understand. If a style is not working, check for spelling mistakes first!

✏️ Your Task

Practise what you just learned about Common Beginner Mistakes (and How to Fix Them). Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 10 of 10

Section 9 · Real-World Use Cases

Understanding CSS is not just academic · it is directly used in:

Web development jobs: Every frontend developer writes CSS daily
Marketing and branding: Companies use CSS to ensure their brand colours, fonts, and layouts appear consistently across their website
Journalism and publishing: News sites like BBC or CNN use CSS to make articles readable and attractive
E-commerce: Online stores like Amazon use CSS to highlight prices, buttons, and product layouts
Mobile apps: Many mobile apps are built with web technologies that include CSS
Data dashboards: Scientists and data analysts who build web-based data visualisation tools use CSS to style charts and reports

Even if you never become a professional developer, understanding CSS helps you communicate with designers and developers, customise website templates, and troubleshoot why something looks wrong on your screen.

✏️ Your Task

Practise what you just learned about Real-World Use Cases. Open your editor, type the examples above by hand, modify them, and observe what changes.

🏗️ Build It — Mini Project

Project Brief

Let us put everything together in a small but complete project. You will write a full CSS stylesheet for a simple personal profile webpage.

Project Brief

You are building a simple personal profile page for someone named "Amara Johnson". The page already has HTML written. Your job is to write all the CSS.

Stage 1 · The HTML (Already Written for You)

starter.html

<!DOCTYPE html>
<html>
  <head>
    <title>Amara's Profile</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Amara Johnson</h1>
    <h2>Web Developer & Designer</h2>
    <p>Hello! I am a passionate web developer based in Lagos. I love building
    clean, user-friendly websites that make a difference.</p>
    <h2>My Skills</h2>
    <p>HTML, CSS, JavaScript, Python, UI Design</p>
    <h2>Contact</h2>
    <p>Email: amara@example.com</p>
  </body>
</html>

Lesson 01 complete! 🎉

You covered:

✅ Lesson Introduction
✅ Prerequisite Concepts · Things You Need to Know First
✅ Section 1 · What Is CSS?
✅ Section 2 · CSS and HTML: How They Work Together
✅ Section 3 · CSS Syntax: The Grammar of CSS
✅ Section 4 · Understanding Each Part in Depth
✅ Section 5 · Simple Standalone Examples
✅ Section 6 · Guided Practice Exercises

Lesson 02 →

Introduction to CSS · What It Is, Why It Exists, and How It Works

👋 Welcome to Lesson 01

What is HTML?

The Simple Definition

Breaking Down the Name

What Can CSS Control?

CSS Saves a Huge Amount of Work

A Real-World Analogy

Seeing CSS In Action

The Three Parts of a CSS Rule

The Correct Terms to Know

Multiple Declarations in One Rule

Multiple Rules for Different Selectors

4.1 · The Selector

4.2 · The Property

4.3 · The Value

4.4 · Curly Braces { }

4.5 · The Colon :

4.6 · The Semicolon ;

Example 1 · Styling a Heading (Most Basic Possible)

Example 2 · Changing the Background

Example 3 · Styling a Paragraph

Example 4 · Multiple Rules for Multiple Elements

Exercise 1 · Warm-Up: Your First CSS Rule

Exercise 2 · Multiple Declarations

Exercise 3 · Page Background and Heading Together

Exercise 4 · Build a Full Simple Stylesheet

Mistake 1 · Missing Curly Braces

Mistake 2 · Missing Colon

Mistake 3 · Missing Semicolons Between Declarations

Mistake 4 · Writing the Selector as an HTML Tag

Mistake 5 · Confusing the Colon and Semicolon

Mistake 6 · Forgetting to Close the Curly Brace

Mistake 7 · Misspelling a Property or Value

Project Brief

Stage 1 · The HTML (Already Written for You)

Amara Johnson

Web Developer & Designer

My Skills

Contact

Lesson 01 complete! 🎉

4.4 · Curly Braces `{ }`

4.5 · The Colon `:`

4.6 · The Semicolon `;`