Hex colors in CSS - Mini Project: Build & Apply

Hex Colors in CSS

📖 Scenario: You are designing a simple webpage and want to use specific colors for the background and text using hex color codes.

🎯 Goal: Create CSS rules that use hex colors to style the background and text color of a webpage.

📋 What You'll Learn

Use hex color codes to set colors

Apply background color to the body element

Apply text color to the h1 element

Use valid CSS syntax

💡 Why This Matters

🌍 Real World

Web designers use hex colors to precisely control the colors on websites.

💼 Career

Knowing how to use hex colors in CSS is essential for front-end web development and design jobs.

1

Create the CSS selector for the body

Write a CSS rule for the body selector that sets the background color to #f0f8ff.

CSS

/* Your code here */

Need a hint?

Remember to use the background-color property and the hex code #f0f8ff.

2

Create the CSS selector for the heading

Add a CSS rule for the h1 selector that sets the text color to #ff4500.

CSS

body {
  background-color: #f0f8ff;
}

/* Your code here */

Need a hint?

Use the color property to set the text color with the hex code #ff4500.

3

Add a CSS rule for paragraph text

Add a CSS rule for the p selector that sets the text color to #2e8b57.

CSS

body {
  background-color: #f0f8ff;
}

h1 {
  color: #ff4500;
}

/* Your code here */

Need a hint?

Use the color property with the hex code #2e8b57 for paragraph text.

4

Add a CSS rule for links

Add a CSS rule for the a selector that sets the link color to #0000ff.

CSS

body {
  background-color: #f0f8ff;
}

h1 {
  color: #ff4500;
}

p {
  color: #2e8b57;
}

/* Your code here */

Need a hint?

Use the color property with the hex code #0000ff for links.