CSS Basics

What is CSS?

CSS (Cascading Style Sheets) is what makes websites beautiful! HTML provides structure, but CSS adds colors, layouts, animations, and visual design.

Why Learn CSS?

Visual Appeal: Transform plain HTML into stunning designs
User Experience: Good design keeps visitors engaged
Branding: Create unique, memorable websites
Responsive Design: Make sites work on all devices
Career Essential: Every web developer needs CSS

How CSS Works

CSS finds HTML elements (using selectors) and applies visual styles (colors, sizes, positions, etc.) to them.

Three Ways to Add CSS

1. Inline CSS (Quick but not recommended)

<h1 style="color: blue; font-size: 32px;">Title</h1>

❌ Problem: Hard to maintain, styles mixed with HTML

2. Internal CSS (Good for single pages)

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

⚠️ Use When: Small projects or page-specific styles

3. External CSS (Best practice!)

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

✅ Why Best: Reusable, organized, cached by browser

CSS Syntax Explained

selector {
  property: value;
  property: value;
}

Example:

h1 {              /* selector: which element to style */
  color: blue;    /* property: what to change */
  font-size: 32px;/* value: how to change it */
}

Common Selectors:

h1 { color: blue; }        /* Element */
.class { color: red; }     /* Class */
#id { color: green; }      /* ID */

Real-World Use

Every beautiful website—Instagram, Netflix, Spotify—uses CSS for its unique design!

Your Turn: Experiment!

Task: Style an h1 to be blue and font-size 32px. Try These:

Use all three CSS methods—which is easiest to update?
Add multiple properties to one selector
Misspell a property—does it break or ignore it?
Use browser DevTools (F12) to live-edit CSS!

CSS Basics - Selectors

Lesson Content