0
0
CSSmarkup~5 mins

Content area in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.