HSL colors in CSS - Mini Project: Build & Apply

Using HSL Colors in CSS

📖 Scenario: You are creating a simple webpage with colorful sections. You want to use HSL colors to style the background and text colors because HSL lets you easily adjust hue, saturation, and lightness.

🎯 Goal: Build a CSS stylesheet that uses HSL colors to style a webpage with a header, main content, and footer. Each section should have a distinct background color using HSL, and the text color should also use HSL for good contrast.

📋 What You'll Learn

Use HSL color values for background colors in header, main, and footer sections.

Use HSL color values for text colors in each section.

Choose different hues for each section to show color variety.

Adjust saturation and lightness to ensure text is readable on backgrounds.

Write clean, valid CSS code.

💡 Why This Matters

🌍 Real World

Web designers often use HSL colors because they make it easy to adjust colors by changing hue, saturation, or lightness. This helps create consistent and accessible color schemes.

💼 Career

Knowing how to use HSL colors in CSS is important for front-end developers and designers to build visually appealing and accessible websites.

1

Create basic CSS selectors for page sections

Write CSS rules for the selectors header, main, and footer with no styles yet. Just create empty blocks for each selector.

CSS

header {
  /* Your code here */
}

main {
  /* Your code here */
}

footer {
  /* Your code here */
}

Need a hint?

Start by writing the selectors header, main, and footer with curly braces.

2

Add HSL background colors to each section

Add a background-color property to header, main, and footer using these exact HSL values: header uses hsl(200, 70%, 50%), main uses hsl(120, 60%, 70%), and footer uses hsl(340, 80%, 60%).

CSS

header {
  /* Add background-color here */
}

main {
  /* Add background-color here */
}

footer {
  /* Add background-color here */
}

Need a hint?

Use the background-color property with the exact HSL values given for each section.

3

Add HSL text colors for good contrast

Add a color property to header, main, and footer using these exact HSL values: header uses hsl(0, 0%, 95%), main uses hsl(0, 0%, 30%), and footer uses hsl(0, 0%, 10%).

CSS

header {
  background-color: hsl(200, 70%, 50%);
  /* Add color here */
}

main {
  background-color: hsl(120, 60%, 70%);
  /* Add color here */
}

footer {
  background-color: hsl(340, 80%, 60%);
  /* Add color here */
}

Need a hint?

Use the color property with the exact HSL values given for each section's text color.

4

Add padding and font styles for better appearance

Add padding: 1.5rem and font-family: Arial, sans-serif to header, main, and footer to improve spacing and text style.

CSS

header {
  background-color: hsl(200, 70%, 50%);
  color: hsl(0, 0%, 95%);
  /* Add padding and font-family here */
}

main {
  background-color: hsl(120, 60%, 70%);
  color: hsl(0, 0%, 30%);
  /* Add padding and font-family here */
}

footer {
  background-color: hsl(340, 80%, 60%);
  color: hsl(0, 0%, 10%);
  /* Add padding and font-family here */
}

Need a hint?

Add padding: 1.5rem and font-family: Arial, sans-serif inside each section's CSS block.