First CSS stylesheet - Mini Project: Build & Apply

First CSS Stylesheet

📖 Scenario: You are creating a simple webpage for a small bakery. The page needs to look friendly and inviting with some basic colors and fonts.

🎯 Goal: Create a CSS stylesheet that styles the bakery webpage with a background color, font style, and colors for headings and paragraphs.

📋 What You'll Learn

Use a CSS file to style the webpage

Set the background color of the page

Change the font family for the whole page

Set a color for all h1 headings

Set a color for all p paragraphs

💡 Why This Matters

🌍 Real World

Styling webpages with CSS is essential for making websites look attractive and easy to read.

💼 Career

Web developers and designers use CSS daily to control the appearance of websites and apps.

1

Create the CSS file and set the background color

Create a CSS file and write a rule for the body element that sets the background color to #fff8e1.

CSS

/* Your code here */

Need a hint?

Remember to write the selector body and use background-color property.

2

Set the font family for the whole page

Add a CSS rule for the body element that sets the font family to Arial, sans-serif.

CSS

body {
  background-color: #fff8e1;
  /* Set font family here */
}

Need a hint?

Use the font-family property inside the body selector.

3

Set the color for all h1 headings

Write a CSS rule for the h1 element that sets the text color to #d2691e.

CSS

body {
  background-color: #fff8e1;
  font-family: Arial, sans-serif;
}

/* Add h1 color rule here */

Need a hint?

Use the selector h1 and the color property.

4

Set the color for all p paragraphs

Write a CSS rule for the p element that sets the text color to #555555.

CSS

body {
  background-color: #fff8e1;
  font-family: Arial, sans-serif;
}

h1 {
  color: #d2691e;
}

/* Add p color rule here */

Need a hint?

Use the selector p and the color property.