What is Content area in CSS?

CSSmarkup~5 mins

Content area in CSS

Choose your learning style10 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Start learning this pattern below

Jump into concepts and practice - no test required

Recommended

Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong

Introduction

The content area is the part of a webpage where your main text, images, and other information appear. It helps organize what visitors see clearly.

When you want to separate the main text from headers and footers on a webpage.

When designing a blog post area that holds articles and images.

When creating a layout that needs a clear space for user content.

When you want to control the size and spacing of the main content on different screen sizes.

Syntax

CSS

selector {
  width: value;
  height: value;
  padding: value;
  margin: value;
  background-color: color;
  /* other style properties */
}

Use width and height to control the size of the content area.

Use padding to add space inside the content area, and margin to add space outside it.

Examples

This sets a main content area 60 rem wide, centers it horizontally, adds padding inside, and gives it a light gray background.

CSS

main {
  width: 60rem;
  margin: 2rem auto;
  padding: 1rem;
  background-color: #f0f0f0;
}

This creates a content section with a maximum width, centered on the page, with padding and a subtle shadow for depth.

CSS

section.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Sample Program

This example shows a simple webpage with a header, a centered content area, and a footer. The content area uses max-width, margin, padding, background color, and a shadow to stand out and be easy to read.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Content Area Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #e9ecef;
      margin: 0;
      padding: 0;
    }
    header, footer {
      background-color: #343a40;
      color: white;
      text-align: center;
      padding: 1rem 0;
    }
    main {
      max-width: 50rem;
      margin: 2rem auto;
      padding: 1.5rem;
      background-color: white;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
      border-radius: 0.5rem;
    }
    h1 {
      margin-top: 0;
    }
  </style>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  <main>
    <h2>Welcome to the Content Area</h2>
    <p>This is where the main information of the page goes. It is centered and has space around it so it looks neat and easy to read.</p>
    <p>Try resizing the browser window to see how the content area stays nicely sized and centered.</p>
  </main>
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

OutputSuccess

Important Notes

Use relative units like rem or % for widths to help the content area adjust on different screen sizes.

Adding max-width helps prevent the content from becoming too wide on large screens, which improves readability.

Centering with margin: auto works only if you set a width or max-width.

Summary

The content area holds the main information on a webpage.

Use CSS properties like width, max-width, padding, and margin to control its size and spacing.

Centering the content area and adding background and shadows makes it easier to read and visually appealing.

Practice

(1/5)

1. What does the content area of a webpage usually contain?

easy

A. The main information and text the user reads

B. Only the website's header and footer

C. Background images and colors only

D. Browser controls like back and forward buttons

Content area in CSS

Start learning this pattern below

Practice

Solution

Step 1: Understand the role of content area

Step 2: Differentiate from other parts

Final Answer:

Quick Check:

Solution

Step 1: Identify property for width limits

Step 2: Differentiate from other properties

Final Answer:

Quick Check:

Solution

Step 1: Calculate 50rem in pixels

Step 2: Calculate max-width 90% of window

Step 3: Compare width and max-width

Final Answer:

Quick Check:

Solution

Step 1: Understand margin shorthand

Step 2: Check horizontal margins for centering

Final Answer:

Quick Check:

Solution

Step 1: Check centering with margin

Step 2: Verify max-width and padding

Step 3: Evaluate box-shadow subtlety

Final Answer:

Quick Check: