Be able to use the <div> tag including to apply styles and classes

21 Website Authoring – The <div> Tag

What is a <div>?

A <div> is a container element that groups other HTML elements together. Think of it as a 📦 that holds items so you can move, style, or hide them as a single unit.

Why Use <div>?

  • Organises content into logical sections.
  • Enables CSS styling for layout, colour, and spacing.
  • Helps with JavaScript manipulation (e.g., show/hide).
  • Provides a flexible “blank slate” for custom designs.

Applying Styles to a <div>

  1. Choose a <div> selector in CSS.
  2. Set visual properties: background-color, border, padding, margin, width, height, etc.
  3. Use display to control layout: block, inline-block, flex, grid.
  4. Test in a browser to see the changes.

Using Classes with <div>

Classes allow you to reuse the same style on multiple <div> elements.

<div class="card">
  <h3>Card Title</h3>
  <p>Some content here.</p>
</div>

Then in CSS:

.card {
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  padding: 15px;
  border-radius: 8px;
}

Example: Building a Simple Page Layout

Below is a minimal layout using <div> with class attributes.

<div class="header">
  <h1>My Website</h1>
</div>

<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<div class="content">
  <p>Welcome to the site!</p>
</div>

<div class="footer">
  <p>© 2026 My Website</p>
</div>

CSS (inline for this example):

<div class="header" style="background:#ffeb3b; padding:10px;">…</div>
<div class="nav" style="background:#cfd8dc; padding:10px;">…</div>
<div class="content" style="padding:20px;">…</div>
<div class="footer" style="background:#b0bec5; padding:10px;">…</div>

Exam Tips 📚

Remember:

  • Use <div> for structural layout, not for semantic meaning.
  • Always give meaningful class names (e.g., header, sidebar, article).
  • Show how you would style a <div> with CSS (background, border, padding).
  • Explain the difference between class and id attributes.
  • Practice writing a small snippet that creates a <div> with a class and styles it.

Quick Reference Table

Attribute Description
class Assigns one or more class names to the element for CSS styling.
id Unique identifier for the element; used for CSS and JavaScript.
style Inline CSS declaration (e.g., style="background:#fff;").
data-* Custom data attributes for storing extra information.

Revision

Log in to practice.

2 views 0 suggestions