Be able to apply classes to elements within a web page

21 Website Authoring – Applying Classes to Elements

What is a Class?

A class is a reusable label you attach to one or more HTML elements. Think of it like a name tag that tells the browser, “All elements with this tag should look or behave the same way.” 🎯

Why Use Classes?

  • Reusability – style one class, apply it everywhere.
  • Separation of concerns – keep HTML structure separate from design.
  • Maintainability – change one CSS rule, all elements update.
  • Scalability – add new pages without rewriting styles.

How to Add a Class

  1. Open your HTML file.
  2. Locate the element you want to style.
  3. Add the attribute class="yourClassName" inside the opening tag.
  4. In your CSS, target the class with .yourClassName { … }.

Example: Styling Buttons

Below is a quick demo. The button uses the class btn-primary to get a blue background and white text. You can reuse btn-primary on any button or link.

HTML CSS
<button class="btn-primary">Click Me</button> .btn-primary {
  background:#2980b9;
  color:white;
  padding:10px 20px;
  border:none;
  border-radius:4px;
  cursor:pointer;
}

Common Class Naming Conventions

Purpose Example Class
Primary button btn-primary
Secondary button btn-secondary
Header text heading
Navigation link nav-link

Exam Tip Box

Tip: When marking, examiners look for correct syntax and reusable classes. Avoid inline styles; use class="…" and separate CSS. Also, remember that class names are case‑sensitive – Btn-primary is different from btn-primary.

Quick Quiz

  1. What is the correct way to add a class to a <div>?
  2. Why should you avoid using style="…" inside your HTML tags?
  3. Give an example of a class name you might use for a footer section.

Revision

Log in to practice.

2 views 0 suggestions