Great! Let’s continue with Lesson 5 — it’s time to make things look beautiful with CSS 🎨
📘 LESSON 5: Learn CSS – Styling the Web
✅ Learning Goals:
- Understand what CSS is and why it’s important
- Learn basic CSS syntax and how to link it to HTML
- Style text, colors, spacing, and layout
- Write your first styled webpage
🧾 Lesson Content (Text for Website)
🎨 What is CSS?
CSS stands for Cascading Style Sheets.
It controls how your HTML content looks and feels — fonts, colors, sizes, spacing, layout, and more!
If HTML is the structure, then CSS is the paint, decorations, and layout.
🧠 CSS Syntax
CSS is written using this pattern:
selector {
property: value;
}
✅ Example:
h1 {
color: red;
font-size: 36px;
}
This will make all <h1> elements red and big.
👕 Three Ways to Add CSS
| Method | Description | Example |
|---|---|---|
| Inline CSS | Inside an HTML tag (not recommended) | <h1 style="color:red"> |
| Internal CSS | Inside a <style> tag in HTML file | See below |
| External CSS ✅ | Linked in a separate .css file | Best practice |
🧪 Internal CSS Example
<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial;
}
h1 {
color: #ff6f00;
}
p {
color: #333;
}
</style>
</head>
<body>
<h1>This is a styled heading</h1>
<p>CSS makes things beautiful!</p>
</body>
</html>
🧪 External CSS Example
- Create a file
style.css:
body {
background-color: white;
font-family: sans-serif;
}
h1 {
color: #ff0000;
}
- Link it in your HTML:
<link rel="stylesheet" href="style.css" />
🧰 Common CSS Properties
| Property | Description |
|---|---|
color | Text color |
background-color | Background color |
font-size | Size of the text |
font-family | Type of font |
padding | Space inside an element |
margin | Space outside an element |
border | Adds border around elements |
text-align | Aligns text left, center, right |
📌 Try It Yourself
Create lesson5.html and style.css, then connect them.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Styled Webpage</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Welcome to CSS World</h1>
<p>This page is styled using external CSS!</p>
</body>
</html>
CSS (style.css):
body {
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #ff6f00;
}
Open lesson5.html in your browser to see your first styled webpage!
💪 Practice Task
✅ Create a page that includes:
- A colored background
- Two different heading styles
- A paragraph with padding and custom font
- A button with styled color and border-radius
📌 Quick Summary
- CSS makes your websites look awesome
- It’s written using selectors, properties, and values
- You can add CSS inline, internally, or externally
- Use external CSS for clean and reusable code
Join Our Telegram Channel
One Response