Day 9: Colors, Fonts, and Typography | Web Development Series

🌈 Day 9: Colors, Fonts, and Typography

Today, you'll learn how to use CSS to control text color, background color, font size, font family, and other typography features to make your content visually appealing.

---

🎨 Colors

You can change text or background colors using the color and background-color properties.

h1 {
  color: darkblue;
}

p {
  background-color: #fef08a;
  color: #333;
}

🔤 Fonts

Use font-family to change the typeface of your text.

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: 'Georgia', serif;
}

📝 Typography

• font-size: Set size of the text
• font-weight: Make text bold or light
• line-height: Spacing between lines
• text-align: Align text (left, center, right)
• text-transform: Make text uppercase, lowercase, etc.

h2 {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

🧪 Practice Task

• Create an HTML page and style text with 3 different font families
• Use 3 different text and background color combinations
• Try text-align, font-size, and text-transform in headings

🚀 What’s Next?

In Day 10, we’ll explore the CSS Box Model: margin, padding, borders, and how they affect layout.

Coming Soon: Day 10 - CSS Box Model