π’ 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
s4b6me
3y6h8w
wm4bgc
4ydryd
4vp6ij
8fpzy4
6tcdew
8aj11p
nwwica
tkangx
gw04eb
b4e8fi
h7lgvl