Audience: Students who have completed Lesson 1 (with a deployed index.html) Time: A 1–2 hour special session Prerequisites: The GitHub repository you created in Lesson 1, VS Code Outcome: Your own styled homepage with colors, fonts, and layout applied

Lesson Flow at a Glance

1. What Is CSS? (10 minutes)

The Relationship Between HTML and CSS

In Lesson 1, we said HTML is "attaching meaning to text." CSS is "dressing that meaning in style."

HTML = skeleton (structure)
CSS  = clothes, makeup (style)

Even with the same HTML, CSS can turn it into a completely different page. Every website in the world is a combination of these two.

Three Ways to Apply CSS

Method 1: Directly inside the tag (inline) — not recommended

<h1 style="color: red;">Title</h1>

Method 2: Inside a <style> tag — good for small projects (the approach used in Lesson 1)

<head>
    <style>
        h1 { color: red; }
    </style>
</head>

Method 3: Separate it into a standalone .css file — the industry standard ✅

<head>
    <link rel="stylesheet" href="style.css">
</head>

Today we will go with Method 3. Splitting HTML and CSS into separate files makes your code much cleaner.

2. CSS Basic Syntax (20 minutes)

Structure

selector {
    property: value;
    property: value;
}

Example:

h1 {
    color: blue;
    font-size: 32px;
}

• Selector: specifies which HTML element the style applies to
• Property: what to change
• Value: how to change it
• Always put a semicolon (;) at the end of each line — if you forget it, the properties below it stop working too

The Three Main Kinds of Selectors

Tag selector — applies to every element with that tag

p { color: gray; }

Class selector (.) — applies to elements with class="name"

.card { background: #f3f4f6; }

<div class="card">Content</div>

ID selector (#) — applies to the one single element with id="name"

#header { background: #2563eb; }

<div id="header">Header</div>

💡 Practical tip: An ID can be used only once per page. In practice, you will use classes far more often.

Creating the style.css File

Create a style.css file in the same folder as index.html.

Then add this single line inside the <head> of index.html:

<link rel="stylesheet" href="style.css">

Move everything that was inside the <style> tag from Lesson 1 into style.css, then delete the <style> tag.

3. Commonly Used CSS Properties (25 minutes)

3-1. Colors (color, background-color)

h1 {
    color: #2563eb;           /* text color */
    background-color: #eff6ff; /* background color */
}

Ways to express a color

• Name: red, blue, white, black — simple, but the range is limited
• HEX: #2563eb — the most commonly used in practice
• RGB: rgb(37, 99, 235) — specify it directly with numbers

💡 If choosing colors is hard, try picking a palette from https://coolors.co or https://colorhunt.co.

3-2. Fonts (font-family, font-size, font-weight)

body {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 400; /* weight: 400=normal, 700=bold */
    line-height: 1.6; /* line spacing: 1.6 times */
}

Using Google Fonts (free, with Korean support)

Add this inside <head>:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

Then you can use font-family: 'Noto Sans KR'.

3-3. Spacing (margin, padding)

This is the most confusing part, but it is essential.

┌──────────────────────────────┐
│     margin (outer space)     │
│  ┌────────────────────────┐  │
│  │  border                │  │
│  │  ┌──────────────────┐  │  │
│  │  │ padding (inner)  │  │  │
│  │  │  ┌────────────┐  │  │  │
│  │  │  │  content   │  │  │  │
│  │  │  └────────────┘  │  │  │
│  │  └──────────────────┘  │  │
│  └────────────────────────┘  │
└──────────────────────────────┘

.card {
    margin: 20px;          /* all outer spacing */
    margin-top: 20px;      /* top only */
    padding: 20px;         /* all inner spacing */
    padding: 10px 20px;    /* 10px top and bottom, 20px left and right */
}

3-4. Borders and Rounded Corners

.card {
    border: 1px solid #e5e7eb;  /* thickness style color */
    border-radius: 8px;          /* rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* shadow */
}

3-5. Width and Height

.container {
    width: 600px;      /* fixed width */
    max-width: 100%;   /* maximum width (never wider than the screen) */
    height: 200px;     /* fixed height */
}

4. Building Layouts with Flexbox (25 minutes)

Why Flexbox Is Necessary

The most painful thing in CSS is "I want to center this." Flexbox solves this problem cleanly.

Core Concept

.container {
    display: flex;
}

With this single line, the child elements are laid out side by side horizontally.

[Child 1] [Child 2] [Child 3]

Key Properties

justify-content — horizontal alignment

.container {
    display: flex;
    justify-content: center;        /* center */
    justify-content: space-between; /* push to both ends, even spacing in between */
    justify-content: flex-end;      /* far right */
}

align-items — vertical alignment

.container {
    display: flex;
    align-items: center;  /* vertically centered */
    align-items: stretch; /* stretch to fit (default) */
}

flex-direction — layout direction

.container {
    display: flex;
    flex-direction: row;    /* horizontal (default) */
    flex-direction: column; /* stack vertically */
}

flex-wrap — line wrapping

.container {
    display: flex;
    flex-wrap: wrap; /* move children to the next line when they overflow */
}

Real Example: Three Cards Side by Side

.cards {
    display: flex;
    gap: 20px;       /* space between children */
    flex-wrap: wrap; /* wrap when the screen is narrow */
}

.card {
    flex: 1;         /* share the remaining space equally */
    min-width: 200px;
}

<div class="cards">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

Common Pattern: Perfect Horizontal and Vertical Centering

.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* full screen height */
}

5. Responsive Basics (20 minutes)

What Is Responsive Design?

It means the layout automatically changes with the screen size (desktop, tablet, phone).

The viewport Meta Tag

It must be inside <head>. (The Lesson 1 example already has it.)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without it, your page looks like a shrunken desktop screen on a phone.

Media Queries

You can attach conditions such as "when the screen width is 600px or less" to your CSS.

/* default styles: desktop */
.cards {
    display: flex;
    gap: 20px;
}

/* when the screen width is 600px or less */
@media (max-width: 600px) {
    .cards {
        flex-direction: column; /* stack vertically */
    }
}

Common Breakpoints

/* tablet */
@media (max-width: 768px) { ... }

/* phone */
@media (max-width: 480px) { ... }

How to Check It on a Phone

In the browser press F12 → click the 📱 icon in the top left (Toggle device toolbar) → choose a device at the top (iPhone, Galaxy, etc.).

6. Practice & Deployment (20 minutes)

Today's Finished Example

You will finish with a structure that keeps index.html and style.css separate.

Example files: src/index.html, src/style.css

Uploading to GitHub

Upload to the my-website repository you created in Lesson 1.

1. GitHub repository → Add file → Upload files
2. Drag both index.html and style.css
3. Commit changes

Vercel detects the change automatically and updates within 30 seconds.

Challenge Assignments (in order of difficulty)

1. 🟢 Try applying a Google Font (Noto Sans KR or any font you like)
2. 🟢 Add a hover effect (a:hover { color: red; })
3. 🟡 Lay out the cards horizontally with Flexbox
4. 🟡 Build a header area (background color + centered)
5. 🔴 Apply a media query so the layout changes on phones

Common Stumbling Blocks

• CSS is not applying: Check that the path in <link rel="stylesheet" href="style.css"> is correct. Paths are case-sensitive too.
• Spacing looks wrong: Do not mix up margin and padding. You can inspect the box model in developer tools (F12) → Computed tab.
• Nothing centers: text-align: center centers text only; to center a block element, use margin: 0 auto or Flexbox.
• Flexbox is not working: display: flex must go on the parent. Putting it on the child has no effect.

7. Wrap-Up & Next Steps (10 minutes)

What We Learned Today

Separate CSS file (style.css)
    ↓
Selector, property, value syntax
    ↓
Colors, fonts, spacing, borders
    ↓
Flexbox layout
    ↓
Responsive with media queries
    ↓
Upload to GitHub → Vercel updates automatically

Good Things to Learn Next

Recommended Learning Resources (all free)

• CSS Tricks - Flexbox Guide (https://css-tricks.com/snippets/css/a-guide-to-flexbox) — a complete guide to Flexbox
• MDN CSS Documentation (https://developer.mozilla.org/ko/docs/Web/CSS) — a dictionary of properties
• Flexbox Froggy (https://flexboxfroggy.com/#ko) — learn Flexbox through a game

Appendix A. Frequently Asked Questions (FAQ)

Q. My CSS file is not being applied. Check that the href path in the <link> tag is correct. href="style.css" only works when style.css and index.html are in the same folder. If they are in different folders, adjust the path, for example href="css/style.css".

Q. How do I choose color codes? Using a design palette site is the fastest way. I recommend https://colorhunt.co. If you use VS Code, a color picker extension is handy too.

Q. What is the difference between px, em, rem, and %?

• px: an absolute unit. A number of screen pixels.
• %: a ratio relative to the parent element.
• rem: relative to the root (html) font size. Good for responsive design.
• em: relative to the current element's font size. At the beginner stage, px and rem alone are enough.

Q. When do I use Grid instead of Flexbox? Flexbox is for one-dimensional (row or column) layouts, and Grid is for two-dimensional (rows and columns at the same time) layouts. Grid is more convenient when you need rows and columns together, like card lists or galleries. At the beginner stage, using Flexbox well is enough.

Appendix B. Tips for Instructors

• Keep developer tools (F12) open from the start. The advantage of CSS is that you see results immediately; explaining while changing values live in developer tools makes understanding much faster.
• Visualizing the box model is key. Explaining margin/padding while showing the box diagram at the bottom of the F12 → Elements tab cuts misunderstandings dramatically.
• Finish Flexbox with a game. Letting students play https://flexboxfroggy.com/#ko for just five minutes during class makes it stick much longer.
• You will get a lot of "why does it look like this?" questions. It works best to tell students that design sense is a separate skill and to point them straight to a color palette site.
• Do responsive design last. Worrying about responsiveness from the start makes things too complicated. Finish it on desktop first, then add a single media query block at the end.

Written: 2026-05 / License: free to modify and redistribute