๐ข 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