Styling with CSS

Making Websites Beautiful

Lesson 3: From Plain Text to Stunning Design

Transform your HTML into visual masterpieces

What We'll Learn Today

🎨 What is CSS and why do we need it?
🔧 How to connect CSS to HTML
🌈 Adding colors and fonts
📏 Controlling spacing and layout
🎯 CSS selectors and properties
✨ Making your webpage look professional

Remember Your Plain HTML Page?

🌐 Plain HTML webpage

Hello, World!

This is my very first webpage!

It works, but it looks pretty boring...

A basic link

Functional? ✅ Beautiful? ❌

What is CSS?

Cascading Style Sheets

Cascading: Styles flow down and can override each other
Style: How things look (colors, fonts, spacing)
Sheets: Separate files that contain styling rules

CSS is the "makeup artist" for your HTML!

HTML = Structure | CSS = Appearance

Why Separate HTML and CSS?

📝 HTML

Content & Structure

What information to show
How it's organized
Headings, paragraphs, links

🎨 CSS

Presentation & Design

How it looks
Colors, fonts, spacing
Layout and positioning

This makes websites easier to maintain and update!

How CSS Works

CSS uses rules to style HTML elements:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Selector: h1 - What element to style
Property: color - What aspect to change
Value: blue - How to change it
Declaration: color: blue; - Complete instruction

Three Ways to Add CSS

1. Internal CSS (We'll start here)

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

2. Inline CSS

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

3. External CSS (Professional way)

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

🎨 Let's Add Our First CSS!

Open your HTML file from last lesson and add this to the <head> section:

<head>
  <title>My First Page</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
  </style>
</head>

Save and refresh your browser to see the magic happen! ✨

See the Difference!

❌ Before CSS

Hello, World!

This is my very first webpage!

✅ After CSS

Hello, World!

This is my very first webpage!

Same content, completely different look! 🎉

Essential CSS Properties

p {
  color: green;           /* Text color */
  font-size: 18px;        /* Text size */
  font-family: Arial;     /* Font type */
  background-color: yellow; /* Background */
  padding: 10px;          /* Inner spacing */
  margin: 20px;           /* Outer spacing */
  border: 2px solid black; /* Border */
}

Working with Colors

CSS gives you many ways to specify colors:

h1 { color: red; }           /* Color names */
h2 { color: #ff0000; }      /* Hex codes */
p  { color: rgb(255, 0, 0); } /* RGB values */

Color names: red, blue, green, purple, orange
Hex codes: #ff0000 (red), #0000ff (blue)
RGB: rgb(255, 0, 0) for red

💡 Use online color pickers to find perfect colors!

Making Text Look Great

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 32px;
  font-weight: bold;
  text-decoration: underline;
}

font-family: Choose the typeface
font-size: How big the text is
font-weight: bold, normal, or numbers
text-decoration: underline, none

🎯 Let's Style Everything!

Add this CSS to your <style> section:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f8ff;
  padding: 20px;
}

h1 {
  color: #2c3e50;
  text-align: center;
  border-bottom: 3px solid #3498db;
}

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

📁 Professional Setup: External CSS

Let's organize like real developers:

Step 1: Create a new file called "style.css"
Step 2: Move all CSS from <style> tags to this file
Step 3: Remove <style> tags from HTML
Step 4: Add this line to your HTML <head>:

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

Now you have clean, organized code! 🎉

🎉 Amazing Progress!

✅ Learned CSS basics - selectors, properties, values
✅ Added colors and fonts - made text beautiful
✅ Controlled spacing - padding, margins, borders
✅ Organized our code - external CSS files
✅ Transformed plain HTML - into styled webpages

Your webpage now looks professional! 🌟

Next: Adding interactivity with JavaScript! 🚀