Now, let's move to the next topic in the Web Development Roadmap:

🎨 CSS (Make Your Website Beautiful 🔥)

👉 HTML builds structure, CSS makes it look amazing

🧠 What is CSS?

👉 CSS = Cascading Style Sheets

Used to style HTML elements

Controls:
• Colors 🎨
• Fonts ✍️
• Spacing 📏
• Layout 📱

🔗 How to Add CSS?

✅ 1. Inline CSS

<h1 style="color:red;">Hello</h1>

✅ 2. Internal CSS

<style>
h1 {
  color: blue;
}
</style>

✅ 3. External CSS (Best Practice 🔥)

<link rel="stylesheet" href="style.css">

h1 {
  color: green;
}

📦 CSS Box Model (Very Important)

👉 Every element = box
• Content → actual text
• Padding → space inside
• Border → edge
• Margin → space outside

💡 This is asked in interviews a lot!

⚡ Flexbox (Layout King 👑)

👉 Used to align elements easily

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

💡 Example:
• Center a button
• Create navbar

🧱 Grid (Advanced Layout)

👉 Used for complex layouts
• Rows + Columns
• Perfect for dashboards

📱 Responsive Design

👉 Website should work on:
• Mobile 📱
• Tablet
• Desktop 💻

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

🎯 Mini Project (Do This 🔥)

👉 Style your HTML page:
• Change colors
• Add spacing
• Center content
• Make button look good

💡 Pro Tips

• Learn Flexbox properly → game changer
• Don’t memorize → practice layouts
• Use DevTools to experiment

Double Tap ❤️ For More