HTML/CSS - 9

HTML/CSS - 9: Simple Layouts

Webpages are often made from sections that group related content together. One simple way to create these sections is with the <div> tag.

A <div> is a general-purpose container. By itself, it does not look special, but CSS can give it spacing, a background, a border, and a fixed or maximum width.

In this lesson, you will create a simple card-style layout and practice using padding, margin, and max-width.

Your challenge: Build a centered card with a heading, a short paragraph, and some spacing around the content.

What should you notice?

The <div> groups several elements together so they can be treated as one section. When you give that <div> the class card, the CSS rule .card can style the whole section at once.

Padding vs. margin: padding creates space inside the box, between the content and the border. margin creates space outside the box.

Experiment: Change the card's padding from 25px to 5px. Then try 50px. Watch how the space inside the card changes.

Try this: Change max-width: 700px; to max-width: 400px;. The card should become narrower while staying centered.

About centering: text-align: center; centers the text inside an element. It does not center the element itself. A block such as the card can be centered with left and right margins set to auto, as in margin: 20px auto;.

<style>

  .card {
    background-color: #111;
    border: 2px solid #8A8A8A;
    border-radius: 12px;
    padding: 25px;
    margin: 20px auto;
    max-width: 500px;
  }

</style>

<div class="card">
  <h2>Mission Control</h2>
  <p>This content is grouped inside one simple card.</p>
</div>