🎯 Learning Objectives
By the end of this class, students will:
- Understand what CSS is and why it is used.
- Learn the different ways to apply CSS: inline, internal, and external.
- Understand basic CSS syntax and selectors.
- Learn how to style text, colors, backgrounds, borders, and spacing.
- Apply styles to HTML elements created in previous lessons (tables, forms, semantic pages).
🧩 Part 1: What is CSS?
Concept:
CSS (Cascading Style Sheets) is used to style HTML elements.
- Makes web pages look visually appealing.
- Separates content (HTML) from presentation (CSS).
Analogy:
- HTML → The structure of a house (walls, rooms, doors).
- CSS → The paint, furniture, and decoration.
🧩 Part 2: Ways to Add CSS
| Method |
Syntax |
Example |
When to Use |
| Inline CSS |
<tag style="property: value;"> |
<p style="color: red;">Hello</p> |
Quick changes, single element |
| Internal CSS |
Inside <style> in <head> |
<style> p { color: blue; } </style> |
One-page styling |
| External CSS |
Link to .css file |
<link rel="stylesheet" href="style.css"> |
Multiple pages, reusable styles |
🧩 Part 3: Basic CSS Syntax
selector {
property: value;
property: value;
}
- Selector → the HTML element you want to style (e.g.,
p, h1, .class, #id)