Be able to apply classes to elements within a web page

Published by Patrick Mutisya · 14 days ago

Website Authoring – Applying Classes

21. Website Authoring – Applying Classes to Elements

Learning Objective

By the end of this lesson you will be able to apply classes to elements within a web page and understand how they are used in CSS selectors.

What is a Class?

A class is an attribute that can be added to any HTML element to give it a name that can be referenced by CSS or JavaScript. Unlike an id, a class can be used on multiple elements.

Syntax for Adding a Class

  • Place the class attribute inside the start tag of an element.

  • Assign one or more class names, separated by spaces.

Example:

<div class="highlight">Important text</div>
<p class="note warning">Check this warning</p>

Multiple Classes on One Element

When an element needs several styles, list each class name separated by a space.

<span class="bold italic red">Styled text</span>

Class Selectors in CSS

In a style sheet the period (.) precedes the class name.

.highlight { background-color: #ff0; }
.note { font-size: 0.9em; }
.warning { color: #c00; }

The final appearance of an element is the result of all classes applied to it, combined with the cascade rules.

Specificity Overview

When several rules match the same element, the rule with the higher specificity wins. The basic specificity values can be expressed as:

\$\$

\text{Specificity} = (a, b, c)

\$\$

where:

  • a = number of ID selectors

  • b = number of class selectors, attributes, or pseudo‑classes

  • c = number of type selectors or pseudo‑elements

Best Practices for Naming Classes

RuleExplanation
Use lowercase lettersConsistent and easy to read (e.g., menu-item)
Separate words with hyphensImproves readability; avoid underscores or camelCase
Be descriptiveNames should reflect purpose, not appearance (e.g., error-message not red-text)
Avoid reserved wordsDo not use names like class or id

Step‑by‑Step Example

  1. Create an HTML file example.html.

  2. Add a heading and a paragraph.

  3. Give the heading the class title and the paragraph the classes intro and highlight.

  4. In a separate CSS file styles.css, define the classes.

  5. Link the CSS file using <link rel="stylesheet" href="styles.css">.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="title">Welcome to My Site</h1>
<p class="intro highlight">This paragraph uses two classes.</p>
</body>
</html>

CSS code (styles.css):

.title {
font-family: Arial, sans-serif;
color: #003366;
}
.intro {
font-size: 1.1em;
}
.highlight {
background-color: #ffff99;
}

Suggested diagram: Flow of HTML element → class attribute → CSS class selector → rendered style.

Common Mistakes

  • Forgetting to separate multiple class names with a space.

  • Using the same class name for unrelated purposes, causing unintended styling.

  • Spelling class names inconsistently between HTML and CSS (e.g., menu-item vs menu_item).

  • Applying a class to an element that already has an id with conflicting styles without understanding specificity.

Practice Activities

  1. Open a new HTML file and create a navigation bar with three links. Assign the class nav-link to each link.

  2. Write CSS rules to make .nav-link display as inline‑block, add padding, and change colour on hover.

  3. Add a second class active to the link that represents the current page and style it with a different background colour.

  4. Validate your page in a browser and note how the two classes combine to produce the final appearance.

Summary

Classes are a flexible way to group elements for styling and scripting. By assigning one or more class names to an element and defining matching selectors in CSS, you can control the presentation of many elements efficiently. Remember to use clear, consistent naming and to separate multiple classes with spaces.