Content area in CSS - Mini Project: Build & Apply

Create a Responsive Content Area with CSS

📖 Scenario: You are building a simple webpage layout. The main part of the page is the content area where text and images will appear. You want this content area to have a clear width, some padding inside, and a background color to make it stand out.

🎯 Goal: Build a content area using CSS that has a fixed width of 600px, padding of 1rem on all sides, and a light gray background color. The content area should be centered horizontally on the page.

📋 What You'll Learn

Create a CSS class named content-area

Set the width of .content-area to 600px

Add padding of 1rem inside the content area

Set the background color of .content-area to #f0f0f0

Center the content area horizontally using margin

💡 Why This Matters

🌍 Real World

Content areas are the main parts of many websites where text, images, and other information appear. Styling them well improves readability and user experience.

💼 Career

Web developers often create and style content areas to build clean, user-friendly layouts that work well on different devices.

1

Create the HTML structure with a content area

Write the HTML code to create a div element with the class content-area. Inside this div, add a p tag with the text "Welcome to the content area."

CSS

  Welcome to the content area.

Need a hint?

Use a div with class="content-area" and put a p tag inside it with the exact text.

2

Add the CSS class for width and padding

Create a CSS class called content-area. Set its width to 600px and add padding of 1rem on all sides.

CSS

  Welcome to the content area.



.content-area {
  /* Your code here */
}

Need a hint?

Use width: 600px; and padding: 1rem; inside the .content-area class.

3

Add background color to the content area

In the .content-area CSS class, add a background-color property with the value #f0f0f0.

CSS

  Welcome to the content area.



.content-area {
  width: 600px;
  padding: 1rem;
  /* Your code here */
}

Need a hint?

Add background-color: #f0f0f0; inside the .content-area class.

4

Center the content area horizontally

In the .content-area CSS class, add margin-left and margin-right set to auto to center the content area horizontally.

CSS

  Welcome to the content area.



.content-area {
  width: 600px;
  padding: 1rem;
  background-color: #f0f0f0;
  /* Your code here */
}

Need a hint?

Use margin-left: auto; and margin-right: auto; to center the block horizontally.