🟢 LESSON 1 PRACTICAL
🟢 LESSON 1 PRACTICAL — Your First CSS Styling
🎯 Goal
You will:
- Create an HTML file
- Connect CSS
- Style text (color, size, background)
🧑💻 STEP 1: Create Your Project
Create a folder:
css-lesson-1Inside it, create 2 files:
index.html
style.css🧾 STEP 2: Write HTML
Open index.html and paste this:
<!DOCTYPE html>
<html>
<head>
<title>My First CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This is my first styled page.</p>
</body>
</html>🎨 STEP 3: Add CSS
Open style.css and write:
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
font-size: 40px;
}
p {
color: gray;
font-size: 18px;
}▶️ STEP 4: Run It
- Double-click
index.html - Open in browser
👉 You should see:
- Light gray background
- Blue big title
- Gray paragraph
🧪 STEP 5: EXPERIMENT (VERY IMPORTANT)
Change values yourself:
h1 {
color: red;
}Try:
greenpurple#ff6600
🎯 CHALLENGE TASK (DO THIS YOURSELF)
Update your page to look like this:
Requirements:
- Background → light blue
- h1 → dark green
- p → black
- Increase paragraph size
💡 BONUS (OPTIONAL)
Add another paragraph:
<p class="info">I am learning CSS step by step!</p>Then style it:
.info {
color: orange;
font-weight: bold;
}🚀 YOUR MISSION
- Write the code
- Test it
- Modify colors yourself
- Try to break it (this is how you learn fast)
i9voz5
f0puhj