Lesson 10: Introduction to CSS

What Is CSS?

CSS stands for Cascading Style Sheets. If HTML is the skeleton and content of a web page, CSS is the skin, clothing, and style. CSS controls how HTML elements look — colors, fonts, spacing, layout, animations, and more.

Here's the key insight: HTML handles structure and meaning. CSS handles presentation. They're deliberately separate so you can change how a page looks without touching its content, and vice versa.

graph LR A["HTML
Structure & Content
headings, paragraphs,
links, images, forms"] -->|styled by| B["CSS
Presentation & Layout
colors, fonts, spacing,
layout, animations"] B -->|displayed in| C["Browser
The visual page
the user sees"] style A fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style B fill:#fdf4ff,stroke:#a855f7,stroke-width:2px,color:#1e293b style C fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b

Why keep them separate? Imagine a website with 50 pages. If styling were embedded in the HTML, changing the heading color means editing 50 files. With a separate CSS file, you change one line and all 50 pages update instantly.

💡 A Real-World Analogy

Think of HTML as a house's blueprint — it defines rooms, doors, and windows. CSS is the interior design — it picks the paint colors, furniture, lighting, and layout. You can completely redecorate (change CSS) without knocking down walls (changing HTML).

CSS Syntax: Rules, Selectors, and Declarations

A CSS rule tells the browser: "Find these elements and make them look like this." Every rule has two parts:

selector {
    property: value;
    property: value;
}

Let's break that down:

Selector — what to style (which HTML elements to target)
Declaration block — the curly braces { } containing one or more declarations
Declaration — a single styling instruction made up of a property and a value, separated by a colon and ending with a semicolon

Here's a real example:

h1 {
    color: navy;
    font-size: 36px;
}

This rule says: "Find every <h1> element. Make the text color navy and the font size 36 pixels."

graph TD A["CSS Rule"] --> B["Selector
h1"] A --> C["Declaration Block
{ ... }"] C --> D["Declaration 1
color: navy;"] C --> E["Declaration 2
font-size: 36px;"] D --> F["Property: color
Value: navy"] E --> G["Property: font-size
Value: 36px"] style A fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style B fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b style C fill:#fdf4ff,stroke:#a855f7,stroke-width:2px,color:#1e293b style D fill:#fffbeb,stroke:#f59e0b,stroke-width:1px,color:#1e293b style E fill:#fffbeb,stroke:#f59e0b,stroke-width:1px,color:#1e293b style F fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b style G fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b

A few syntax rules to remember:

Each declaration ends with a semicolon (;). Forgetting it is the #1 CSS beginner mistake.
Properties and values are separated by a colon (:).
You can have as many declarations inside a rule as you want.
Whitespace and indentation don't matter to the browser, but they make your code readable.

/* Multiple rules in one stylesheet */
h1 {
    color: navy;
    font-size: 36px;
    text-align: center;
}

p {
    color: #333333;
    font-size: 18px;
    line-height: 1.6;
}

a {
    color: royalblue;
    text-decoration: none;
}

💡 CSS Comments

CSS uses /* comment here */ for comments. Unlike HTML comments (), CSS comments use slash-asterisk notation. Use them to organize and explain your styles.

Three Ways to Add CSS

There are three ways to attach CSS to an HTML document. We'll look at all three, but spoiler alert — one of them is far better than the others.

1. Inline Styles (Avoid)

You can add styles directly to a single element using the style attribute:

<h1 style="color: navy; font-size: 36px;">Hello World</h1>

Why it's bad: The style only applies to that one element. If you have 20 headings, you'd need to copy the style 20 times. It also mixes presentation into your HTML, defeating the whole purpose of separation.

2. Internal Stylesheet (Sometimes OK)

You can put CSS inside a <style> element in the HTML <head>:

<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <style>
        h1 {
            color: navy;
            font-size: 36px;
        }
        p {
            color: #333;
        }
    </style>
</head>

When it's OK: Quick experiments, single-page demos, or email templates. Why it's not ideal: Styles are stuck inside one HTML file. If your site has multiple pages, you'd duplicate the same styles in every file.

3. External Stylesheet (Best Practice ✅)

You put your CSS in a separate .css file and link to it from HTML:

<!-- In your HTML head -->
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="stylesheet" href="styles/style.css">
</head>

/* In styles/style.css */
h1 {
    color: navy;
    font-size: 36px;
}

p {
    color: #333;
}

Why this wins:

One file, many pages. Link the same CSS file from every HTML page. Change once, update everywhere.
Clean separation. HTML stays focused on content; CSS stays focused on presentation.
Browser caching. The browser downloads the CSS file once and reuses it across pages — faster load times.
Easier maintenance. All your styles live in one organized place.

graph TD A["External CSS File
styles/style.css"] --> B["index.html"] A --> C["about.html"] A --> D["recipe.html"] A --> E["contact.html"] F["Change one rule in CSS"] --> A F --> G["All 4 pages update instantly"] style A fill:#fdf4ff,stroke:#a855f7,stroke-width:2px,color:#1e293b style B fill:#eff6ff,stroke:#3b82f6,stroke-width:1px,color:#1e293b style C fill:#eff6ff,stroke:#3b82f6,stroke-width:1px,color:#1e293b style D fill:#eff6ff,stroke:#3b82f6,stroke-width:1px,color:#1e293b style E fill:#eff6ff,stroke:#3b82f6,stroke-width:1px,color:#1e293b style F fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b style G fill:#f0fdf4,stroke:#22c55e,stroke-width:1px,color:#1e293b

Comparison of CSS Methods
Method	Location	Scope	Best For
Inline	`style=""` attribute	Single element	Avoid if possible
Internal	`<style>` in `<head>`	Single page	Quick experiments
External ✅	Separate `.css` file	Entire site	Real projects

Creating Your First External Stylesheet

Let's do it. You're going to create a CSS file and link it to your homepage. Follow these steps:

Step 1: Create the CSS File

In VS Code, open your project folder (my-website)
Create a new folder called css (right-click the project folder → New Folder)
Inside the css folder, create a new file called style.css

my-website/
├── css/
│   └── style.css      ← new!
├── images/
│   └── sunset.jpg
├── index.html
├── about.html
├── recipe.html
└── contact.html

Step 2: Link the Stylesheet

Open index.html and add a <link> element inside the <head>, after the <title>:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>

The <link> element needs two attributes:

rel="stylesheet" — tells the browser this is a CSS file
href="css/style.css" — the path to your CSS file (relative to the HTML file)

Step 3: Write Some Styles

Open css/style.css and add your first rules:

/* ===========================
   My First Stylesheet
   =========================== */

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
    background-color: #fafafa;
}

h1 {
    color: #1a365d;
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 10px;
}

h2 {
    color: #2d3748;
}

a {
    color: #3b82f6;
}

a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

Step 4: See the Magic

Save both files and open index.html in your browser (or let Live Server refresh it). Your page should look dramatically different — clean font, softer background, styled headings, and colored links.

💡 Nothing Changed?

If your page still looks unstyled, check these common issues:

Is the <link> element inside <head>, not <body>?
Does the href path match your actual file location? (css/style.css means there's a css folder with style.css inside it)
Did you spell stylesheet correctly in rel="stylesheet"?
Try opening the CSS file directly in the browser — if you see the text, the file exists at that path
Check DevTools (F12) → Console for error messages

Basic Selectors

So far we've been selecting elements by their tag name (h1, p, a). These are called element selectors. But what if you want to style only some paragraphs differently? That's where class and ID selectors come in.

Element Selector

Targets every instance of an HTML element:

/* Every paragraph on the page */
p {
    font-size: 18px;
}

/* Every unordered list */
ul {
    list-style-type: square;
}

Class Selector (most useful)

Targets elements with a specific class attribute. Class selectors start with a dot (.):

<!-- HTML: add a class to specific elements -->
<p class="intro">Welcome to my website!</p>
<p>This is a regular paragraph.</p>
<p class="intro">Another intro paragraph.</p>

/* CSS: style only elements with class="intro" */
.intro {
    font-size: 20px;
    font-weight: bold;
    color: #1a365d;
}

Key facts about classes:

A class can be used on multiple elements — that's the whole point
An element can have multiple classes: class="intro highlight" (space-separated)
Class names should be descriptive: .error-message is better than .red-text
Class names are case-sensitive: .intro and .Intro are different

ID Selector

Targets the one element with a specific id attribute. ID selectors start with a hash (#):

<!-- HTML: id must be unique on the page -->
<header id="site-header">
    <h1>My Website</h1>
</header>

/* CSS: style the one element with id="site-header" */
#site-header {
    background-color: #1a365d;
    color: white;
    padding: 20px;
    text-align: center;
}

Key facts about IDs:

An ID must be unique — only one element per page can have a given ID
IDs have higher specificity than classes (we'll explore this in a later lesson)
In practice, classes are preferred over IDs for styling because they're reusable and more flexible

graph TD A["CSS Selectors"] --> B["Element Selector
p { ... }
Targets ALL <p> elements"] A --> C["Class Selector
.intro { ... }
Targets class='intro'"] A --> D["ID Selector
#site-header { ... }
Targets id='site-header'"] B --> E["Broad — styles everything
of that type"] C --> F["Flexible — reusable on
multiple elements ✅"] D --> G["Specific — one unique
element only"] style A fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style B fill:#fffbeb,stroke:#f59e0b,stroke-width:2px,color:#1e293b style C fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b style D fill:#fdf4ff,stroke:#a855f7,stroke-width:2px,color:#1e293b style E fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b style F fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b style G fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b

💡 Class vs. ID — The Quick Rule

Use classes for styling. They're reusable and flexible. Use IDs for JavaScript hooks or anchor links (href="#section-name"), not for CSS. If you find yourself writing an ID selector in CSS, ask: "Could this be a class instead?" The answer is almost always yes.

The Cascade — A First Look

The "C" in CSS stands for Cascading. The cascade is the algorithm the browser uses to decide which styles win when multiple rules target the same element. It's one of the most important concepts in CSS, and we'll cover it in depth later — but here's a quick preview of how it works.

Imagine these three rules all apply to the same <h1>:

/* Rule 1: element selector */
h1 {
    color: navy;
}

/* Rule 2: class selector */
.page-title {
    color: green;
}

/* Rule 3: ID selector */
#main-heading {
    color: red;
}

<h1 class="page-title" id="main-heading">Hello!</h1>

What color is the heading? Red. The cascade resolves conflicts using (among other things) specificity — a scoring system for selectors:

Specificity Hierarchy (Simplified)
Selector Type	Example	Specificity
Element	`h1`	Low
Class	`.page-title`	Medium
ID	`#main-heading`	High
Inline style	`style="..."`	Highest

When two rules have the same specificity, the one that appears later in the CSS file wins:

p {
    color: blue;
}

/* This rule wins because it comes later */
p {
    color: green;
}

Don't worry about memorizing the full specificity system now. The important takeaway is: more specific selectors override less specific ones, and when specificity is equal, the last rule wins. We'll dig deeper into this in upcoming lessons.

Hands-on Exercise

🏋️ Exercise: Style Your Homepage

Objective: Create an external stylesheet and apply it to your index.html.

Instructions:

Create a css folder in your project if you don't have one
Create css/style.css inside it
Add a <link rel="stylesheet" href="css/style.css"> to your index.html <head>
In style.css, write rules to:
- Change the body font to Arial, sans-serif
- Set the body background to a light color (try #fafafa or #f0f4f8)
- Style h1 with a dark color and a colored bottom border
- Style links (a) with a custom color and remove the underline
- Add a hover effect to links: a:hover { text-decoration: underline; }
Add a class called .highlight in your CSS that sets a yellow background (background-color: #fef08a;) and a little padding (padding: 2px 6px;)
In your HTML, wrap one word or phrase in a <span class="highlight"> to test it
Link the same stylesheet to your other HTML pages (about.html, etc.)
Save everything and verify all pages share the same styling

💡 Hint

Start with the body rule — setting the font and background there affects everything on the page. Then style specific elements. Remember: the <link> element goes in <head>, not <body>. If styles aren't appearing, check your file path — if your CSS file is in a css folder, the href should be css/style.css.

✅ Example Solution

/* css/style.css */

/* ===========================
   Global Styles
   =========================== */
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 20px;
    background-color: #f0f4f8;
}

/* ===========================
   Headings
   =========================== */
h1 {
    color: #1a365d;
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 10px;
}

h2 {
    color: #2d3748;
    margin-top: 30px;
}

/* ===========================
   Links
   =========================== */
a {
    color: #3b82f6;
    text-decoration: none;
}

a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* ===========================
   Utility Classes
   =========================== */
.highlight {
    background-color: #fef08a;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ===========================
   Semantic Section Styling
   =========================== */
header {
    background-color: #1a365d;
    color: white;
    padding: 20px;
    margin: -20px -20px 20px -20px;
}

header a {
    color: #93c5fd;
}

footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
    color: #666;
    font-size: 14px;
}

aside {
    background-color: #eff6ff;
    padding: 15px;
    border-left: 4px solid #3b82f6;
    margin: 20px 0;
}

<!-- Add this line to the <head> of every HTML page -->
<link rel="stylesheet" href="css/style.css">

<!-- Example of using the highlight class -->
<p>I'm learning <span class="highlight">HTML and CSS</span> from scratch!</p>

🎯 Quick Quiz

Question 1: What does CSS stand for?

Question 2: Which is the best way to add CSS to a multi-page website?

Question 3: What does a CSS class selector start with?

Question 4: If two CSS rules with the same specificity target the same element, which one wins?

Question 5: What's the most common beginner CSS mistake?

Summary

🎉 Key Takeaways

CSS (Cascading Style Sheets) controls how HTML elements look — colors, fonts, spacing, layout, and more
A CSS rule has a selector (what to style) and a declaration block (how to style it): selector { property: value; }
Use external stylesheets (<link rel="stylesheet" href="...">) for real projects — one file styles your entire site
Element selectors (h1) target all instances; class selectors (.intro) target specific elements; ID selectors (#header) target one unique element
Prefer classes over IDs for CSS — classes are reusable and flexible
The cascade resolves conflicts: more specific selectors win, and when specificity is equal, the last rule wins

📁 Your Project So Far

my-website/
├── css/
│   └── style.css      ← new!
├── images/
│   └── sunset.jpg
├── index.html         ← now linked to CSS
├── about.html         ← linked to same CSS
├── recipe.html        ← linked to same CSS
└── contact.html       ← linked to same CSS

🚀 What's Next?

Your page has a custom font, colors, and a clean background — a huge upgrade from the browser defaults. But CSS can do so much more. In the next lesson, you'll dive deep into colors and typography — hex codes, RGB, HSL, Google Fonts, font stacks, and how to make your text look polished and professional.

🎨 Lesson 10: Introduction to CSS

🎯 Learning Objectives

📑 In This Lesson