Lesson 4: CSS Basics

⏱ ~25 min Lesson 4 of 10 💚 Free

CSS (Cascading Style Sheets) is what makes websites beautiful. While HTML says "this is a heading," CSS says "make it big, green, and centered." Without CSS, the web would be plain black text on a white background.

Key Concepts

Selectors and Rules

A CSS rule has a selector (what to style) and declarations (how to style it). p { color: blue; } selects all <p> tags and makes their text blue. The property is color, the value is blue.

Three Ways to Add CSS

Inline: style attribute on one tag. Internal: <style> block in <head>. External: a separate .css file linked with <link>. External is best for real projects because one file styles the whole site.

Cascading and Specificity

CSS is 'cascading' — multiple rules can apply to the same element. More specific selectors win. An id selector (#myId) beats a class (.myClass) which beats a tag selector (p).

🆕 Live Editor

Edit the code — the preview updates live!

HTML
CSS
PREVIEW

✅ Check Your Understanding

1. What does CSS stand for?

2. In p { color: blue; }, what is 'color'?

3. Which is the best way to add CSS for a real website?

← Lesson 3Lesson 5 →