Lesson 6: Introduction to CSS - Styling Your First Page

What You'll Learn

What CSS is and how it works with HTML
Three ways to add CSS to your pages
Basic CSS syntax (selectors, properties, values)
How to style text and backgrounds
Colors in CSS (names, hex, RGB)
Basic text properties

Why This Matters

HTML provides structure, but CSS (Cascading Style Sheets) makes websites beautiful. CSS controls colors, fonts, spacing, layouts, and every visual aspect of your site. Learning CSS transforms plain HTML into professional-looking websites.

Part 1: What is CSS?

CSS = Cascading Style Sheets

The Web Development Stack:

HTML = Structure and content (the bones)
CSS = Presentation and design (the skin and clothes)
JavaScript = Behavior and interactivity (the muscles)

Before and After CSS

HTML only:

[Plain text, default fonts, no colors, basic layout]

HTML + CSS:

[Beautiful colors, custom fonts, professional layout, visual hierarchy]

Part 2: Three Ways to Add CSS

1. Inline CSS (Directly in HTML tags)

<p style="color: blue; font-size: 18px;">This text is blue and 18px.</p>

Pros: Quick for testing

Cons: Hard to maintain, not reusable

When to use: Rarely (only for quick tests)

2. Internal CSS (In the `` section)

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>This paragraph is styled.</p>
    <p>This paragraph too!</p>
</body>
</html>

Pros: Keeps HTML clean, styles all matching elements

Cons: Only works for one HTML file

When to use: Small projects, single-page sites

3. External CSS (Separate .css file) ⭐ BEST METHOD

HTML file (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>This paragraph is styled.</p>
</body>
</html>

CSS file (styles.css):

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

Pros: Clean, reusable across multiple pages, easy to maintain

Cons: None!

When to use: Always (for real projects)

Part 3: CSS Syntax

Basic Structure

selector {
    property: value;
    property: value;
}

Example:

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

Breaking it down:

h1 - Selector (what to style)
{ } - Declaration block
color: red; - Declaration (property + value)
color - Property (what to change)
red - Value (how to change it)
; - Semicolon (ends each declaration)

Multiple Selectors

h1, h2, h3 {
    color: navy;
    font-family: Arial;
}

Comma-separated selectors get the same styles.

CSS Comments

/ This is a comment /

h1 {
    color: blue; / This makes headings blue /
}

/*
Multi-line
comment
*/

Part 4: Colors in CSS

Color Names

CSS recognizes 140 color names:

p {
    color: red;
}

h1 {
    color: darkblue;
}

div {
    background-color: lightgray;
}

Common colors: red, blue, green, yellow, orange, purple, pink, black, white, gray, brown

Shades: lightblue, darkgreen, lightgray, etc.

Hexadecimal Colors

h1 {
    color: #FF0000; / Red /
}

p {
    color: #0000FF; / Blue /
}

div {
    background-color: #00FF00; / Green /
}

Format: #RRGGBB (Red, Green, Blue in hexadecimal)

#000000 = Black
#FFFFFF = White
#FF0000 = Red
#00FF00 = Green
#0000FF = Blue

Shorthand (when digits repeat):

#FF0000 = #F00
#0000FF = #00F
#FFFFFF = #FFF

RGB Colors

h1 {
    color: rgb(255, 0, 0); / Red /
}

p {
    color: rgb(0, 0, 255); / Blue /
}

Format: rgb(red, green, blue)

Each value: 0-255
rgb(0, 0, 0) = Black
rgb(255, 255, 255) = White

RGBA (with Transparency)

div {
    background-color: rgba(255, 0, 0, 0.5); / 50% transparent red /
}

Format: rgba(red, green, blue, alpha)

Alpha: 0 (fully transparent) to 1 (fully opaque)

Part 5: Text Styling Properties

Color

h1 {
    color: darkblue;
}

p {
    color: #333333;
}

Sets the text color.

Font Family

body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: Georgia, serif;
}

code {
    font-family: 'Courier New', monospace;
}

Font stack: List multiple fonts (browser uses first available)

Generic families:

serif - Traditional fonts (Georgia, Times)
sans-serif - Modern fonts (Arial, Helvetica)
monospace - Code fonts (Courier)
cursive - Handwriting style
fantasy - Decorative fonts

Font Weight

h1 {
    font-weight: bold;
}

p {
    font-weight: normal;
}

.light {
    font-weight: 300;
}

.heavy {
    font-weight: 900;
}

Values:

normal = 400
bold = 700
Numbers: 100, 200, 300, 400, 500, 600, 700, 800, 900

Font Style

em {
    font-style: italic;
}

.normal {
    font-style: normal;
}

Text Alignment

h1 {
    text-align: center;
}

p {
    text-align: left;
}

footer {
    text-align: right;
}

Values: left, right, center, justify

Text Decoration

a {
    text-decoration: underline;
}

.no-underline {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

Text Transform

h1 {
    text-transform: uppercase; / ALL CAPS /
}

h2 {
    text-transform: lowercase; / all lowercase /
}

h3 {
    text-transform: capitalize; / First Letter Capitalized /
}

Line Height

p {
    line-height: 1.6; / Space between lines /
}

Values:

Number (1.5, 1.6, 2) - Relative to font size
Pixels (24px)
Percentage (150%)

Part 6: Background Properties

Background Color

body {
    background-color: lightgray;
}

header {
    background-color: #333333;
}

.highlight {
    background-color: yellow;
}

Background Image

body {
    background-image: url('images/background.jpg');
}

We'll cover more background properties in later lessons.

Part 7: Complete Example

Folder structure:

lesson-06/
├── index.html
├── styles.css
└── images/
    └── (your images)

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Styled Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <p>Learning CSS is fun!</p>
    </header>
    
    <main>
        <h2>About CSS</h2>
        <p>
            CSS stands for <strong>Cascading Style Sheets</strong>. 
            It's used to style HTML documents and make them beautiful.
        </p>
        
        <h2>Why Learn CSS?</h2>
        <p>
            With CSS, you can control colors, fonts, spacing, layouts, 
            and create responsive designs that work on all devices.
        </p>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

styles.css:

/ Reset default margins /
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

/ Header styling /
header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 40px 20px;
}

header h1 {
    font-size: 48px;
    margin: 0;
    text-transform: uppercase;
}

header p {
    font-size: 20px;
    margin: 10px 0 0 0;
    font-style: italic;
}

/ Main content /
main {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
}

h2 {
    color: #2c3e50;
    font-size: 32px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
}

p {
    font-size: 18px;
    line-height: 1.8;
}

strong {
    color: #e74c3c;
}

/ Footer /
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

footer p {
    margin: 0;
    font-size: 14px;
}

Practice Exercises

Exercise 1: Personal Bio Page

Create a personal bio page with:

External CSS file
Custom colors for headings and text
Different font families for headings and paragraphs
Centered main heading
Background color for the page
At least 3 different font sizes

Exercise 2: Color Palette

Create colors.html showing:

5 div elements, each with different background colors
Use hex, RGB, and color names
Text explaining each color
Good contrast between text and background

Exercise 3: Typography Showcase

Create typography.html demonstrating:

5 different font sizes
Bold and italic text
Uppercase, lowercase, and capitalize transforms
Left, center, and right alignment
Different line heights
At least 3 font families

Common Mistakes

Mistake 1: Missing Semicolon

h1 {
    color: red
    font-size: 24px  / ❌ Missing semicolons /
}

Fix:

h1 {
    color: red;
    font-size: 24px;  / ✅ Semicolons added /
}

Mistake 2: Wrong CSS File Path

<link rel="stylesheet" href="style.css">  <!-- ❌ File is named styles.css -->

Fix:

<link rel="stylesheet" href="styles.css">  <!-- ✅ Correct filename -->

Mistake 3: Forgetting Units

h1 {
    font-size: 24;  / ❌ Missing unit /
}

Fix:

h1 {
    font-size: 24px;  / ✅ Unit added /
}

Mistake 4: Typos in Property Names

p {
    colour: blue;  / ❌ British spelling doesn't work /
}

Fix:

p {
    color: blue;  / ✅ American spelling /
}

Quick Reference: CSS Properties

Property	Purpose	Example Values
`color`	Text color	`red`, `#FF0000`, `rgb(255,0,0)`
`background-color`	Background color	`blue`, `#0000FF`
`font-size`	Text size	`16px`, `1.2em`, `120%`
`font-family`	Font type	`Arial`, `Georgia`
`font-weight`	Text thickness	`normal`, `bold`, `700`
`font-style`	Text style	`normal`, `italic`
`text-align`	Horizontal alignment	`left`, `center`, `right`
`text-decoration`	Text decoration	`none`, `underline`
`text-transform`	Text case	`uppercase`, `lowercase`
`line-height`	Line spacing	`1.6`, `24px`

What You Learned

✅ What CSS is and how it works with HTML
✅ Three ways to add CSS (inline, internal, external)
✅ Basic CSS syntax (selectors, properties, values)
✅ How to use colors (names, hex, RGB, RGBA)
✅ Text styling properties (font, size, color, alignment)
✅ How to create and link external CSS files
✅ Best practices for organizing CSS

What's Next?

In the next lesson, you'll dive deeper into colors and typography - learning about color theory, web fonts, and advanced text styling!

Lesson 6: Introduction to CSS - Styling Your First Page

What You'll Learn

Why This Matters

Part 1: What is CSS?

Before and After CSS

Part 2: Three Ways to Add CSS

1. Inline CSS (Directly in HTML tags)

2. Internal CSS (In the `` section)

3. External CSS (Separate .css file) ⭐ BEST METHOD

Part 3: CSS Syntax

Basic Structure

Multiple Selectors

CSS Comments

Part 4: Colors in CSS

Color Names

Hexadecimal Colors

RGB Colors

RGBA (with Transparency)

Part 5: Text Styling Properties

Color

Font Size

Font Family

Font Weight

Font Style

Text Alignment

Text Decoration

Text Transform

Line Height

Part 6: Background Properties

Background Color

Background Image

Part 7: Complete Example

Practice Exercises

Exercise 1: Personal Bio Page

Exercise 2: Color Palette

Exercise 3: Typography Showcase

Common Mistakes

Mistake 1: Missing Semicolon

Mistake 2: Wrong CSS File Path

Mistake 3: Forgetting Units

Mistake 4: Typos in Property Names

Quick Reference: CSS Properties

What You Learned

What's Next?