Content area in CSS

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>

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. 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

Solution

1. Step 1: Understand the role of content area

   The content area is where the main information, like text and images, is shown to the user.

2. Step 2: Differentiate from other parts

   Headers, footers, and backgrounds are separate from the content area.

3. Final Answer:

   The main information and text the user reads -> Option A

4. Quick Check:

   Content area = main info [OK]

Hint: Content area holds main info, not headers or backgrounds [OK]

Common Mistakes:

• Confusing content area with header or footer
• Thinking content area is only background
• Mixing browser controls with page content

2. Which CSS property is used to set the maximum width of the content area?

easy

A. max-width

B. max-height

C. min-width

D. padding

Solution

1. Step 1: Identify property for width limits

   The max-width property limits how wide the content area can grow.

2. Step 2: Differentiate from other properties

   max-height limits height, min-width sets minimum width, and padding adds space inside the box.

3. Final Answer:

   max-width -> Option A

4. Quick Check:

   Max width = max-width [OK]

Hint: Max width controls max size horizontally [OK]

Common Mistakes:

• Using max-height instead of max-width
• Confusing padding with width limits
• Using min-width when max-width is needed

3. What will be the visible width of the content area in this CSS?

div.content {
  width: 50rem;
  max-width: 90%;
  padding: 2rem;
  margin: 0 auto;
}

Assuming the browser window is 800px wide and 1rem = 16px.

medium

A. 400px wide

B. 720px wide

C. 800px wide

D. 50rem wide ignoring max-width

Solution

1. Step 1: Calculate 50rem in pixels

   50rem x 16px = 800px, so width is 800px if no max-width applied.

2. Step 2: Calculate max-width 90% of window

   90% of 800px = 720px, so max-width limits width to 720px.

3. Step 3: Compare width and max-width

   Since 800px (width) is larger than 720px (max-width), the content area width becomes 720px.

4. Final Answer:

   720px wide -> Option B

5. Quick Check:

   Max-width limits width to 720px [OK]

Hint: Max-width limits width even if width is bigger [OK]

Common Mistakes:

• Ignoring max-width and using width only
• Confusing rem to px conversion
• Not calculating percentage of window width

4. This CSS is meant to center the content area horizontally:

.content {
  width: 600px;
  margin: 0 0 auto;
}

Why does it fail to center?

medium

A. Because 'margin: 0 0 auto;' sets bottom margin, not horizontal margins

B. Because width must be in % to center

C. Because width is too large to center

D. Because margin shorthand is missing 'auto' for left and right

Solution

1. Step 1: Understand margin shorthand

   Margin shorthand with three values means: top, horizontal (left and right), bottom. Here '0 0 auto' means top=0, left/right=0, bottom=auto.

2. Step 2: Check horizontal margins for centering

   To center horizontally, left and right margins must be 'auto', but here they are 0, so no centering.

3. Final Answer:

   Because margin shorthand is missing 'auto' for left and right -> Option D

4. Quick Check:

   Horizontal margins must be auto to center [OK]

Hint: Use margin: 0 auto; to center horizontally [OK]

Common Mistakes:

• Using margin: 0 0 auto instead of margin: 0 auto
• Thinking width must be % to center
• Assuming large width prevents centering

5. You want a content area that is centered, has a max width of 700px, padding of 1.5rem, and a subtle shadow. Which CSS snippet achieves this correctly?

hard

A. .content { max-width: 700px; padding: 1.5rem; margin: 0 0 auto; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }

B. .content { width: 700px; padding: 1.5rem; margin: auto 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

C. .content { max-width: 700px; padding: 1.5rem; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

D. .content { max-width: 700px; padding: 1.5rem; margin: 0 auto; box-shadow: 5px 5px 0 rgba(0,0,0,0.5); }

Solution

1. Step 1: Check centering with margin

   Margin 0 auto centers horizontally. Incorrect margins like auto 0 or 0 0 auto do not.

2. Step 2: Verify max-width and padding

   Use max-width: 700px and padding: 1.5rem. Fixed width or wrong margins fail.

3. Step 3: Evaluate box-shadow subtlety

   Subtle shadow: 0 2px 5px rgba(0,0,0,0.1) (small offset, blur, low opacity). Large offsets, no blur, or opacity 0.5 are less subtle.

4. Final Answer:

   .content { max-width: 700px; padding: 1.5rem; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } -> Option C

5. Quick Check:

   Center + max-width + padding + subtle shadow = correct snippet [OK]

Hint: Use margin: 0 auto; max-width and subtle rgba shadow [OK]

Common Mistakes:

• Using margin: auto 0 instead of 0 auto
• Using fixed width instead of max-width
• Applying too strong or wrong shadow values