2026-01-285 min read

class (Web Development)

Learn class (Web Development) step by step with clear examples and exercises.

Why This Matters

Understanding CSS classes is essential in web development as they enable developers to create visually appealing and maintainable websites. By using classes, you can apply consistent styles to multiple HTML elements, making it easier to modify the appearance of your website without having to change each element individually. Furthermore, CSS classes promote reusability and help keep your code organized and manageable.

Prerequisites

Before diving into CSS classes, it's essential to have a basic understanding of:

HTML (HyperText Markup Language)
The document structure (HTML tags like `, , `, etc.)
Basic CSS syntax and selectors (e.g., h1 { color: red; } applies the color red to all h1 elements)
Familiarity with HTML attributes such as id, class, and style

Core Concept

What are CSS classes?

CSS classes are a way to group similar HTML elements and apply specific styles to them. A class is defined within a ` or an external .css file using the .class-name syntax, where class-name is any unique identifier you choose (e.g., .my-button, .red-text`, etc.).

Defining CSS classes

To define a CSS class, follow these steps:

Choose a descriptive name for your class (e.g., .my-button).
In your CSS file or within the ` tag in your HTML document, create the class using the .class-name` syntax followed by a set of curly braces containing the styles you want to apply:

<head>
<style>
.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>

Applying CSS classes to HTML elements

To apply a CSS class to an HTML element, add the class attribute to the opening tag of the desired element and assign it the name of your class:

<button class="my-button">Click me!</button>

In this example, the my-button class is applied to a `` element, giving it the blue background color, white text, and other styles defined in the CSS file.

Multiple classes on one HTML element

You can apply multiple classes to a single HTML element by separating them with spaces within the class attribute:

<div class="my-class1 my-class2">Content</div>

In this example, both my-class1 and my-class2 are applied to the same `` element.

Inheritance of CSS properties

When multiple classes are applied to an HTML element, the properties defined in each class will be combined. If there is a conflict between properties, the one defined later in the cascade (usually in the more specific selector) will take precedence.

Worked Example

Let's create a simple HTML page with a styled button using CSS classes:

HTML file (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Classes Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="centered title">My Styled Button</h1>
<button class="my-button">Click me!</button>
<p class="example-text">This is an example of a styled paragraph.</p>
</body>
</html>

CSS file (styles.css)

.centered {
text-align: center;
}

.title {
font-size: 3rem;
font-weight: bold;
}

.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.example-text {
font-size: 1.2rem;
color: #666;
}

In this example, the centered class centers the text within the ` element, the title class gives it a larger font size and bold style, the my-button class styles the button as described in the Core Concept section, and the example-text` class styles the paragraph with a smaller font size and gray color.

Common Mistakes

1. Forgetting to link the CSS file

Ensure that your HTML file includes a `` tag pointing to the CSS file:

<head>
<link rel="stylesheet" href="styles.css">
</head>

2. Incorrect class names

Class names should be unique and descriptive. Avoid using spaces, special characters, or reserved keywords as part of your class name. Instead, use hyphens (-) or underscores (_) to separate words in the class name (e.g., my-class-name or my_class_name).

3. Not applying the correct CSS property for a given style

For example, to create a red background color, use background-color instead of bg-color.

4. Incorrectly using IDs and classes together on the same HTML element

While it is possible to apply both an ID and a class to the same HTML element by separating them with spaces in the class attribute (e.g., class="my-id my-class"), it's generally recommended to use classes for styling multiple elements and IDs for targeting specific elements when needed.

5. Overuse of CSS classes

While CSS classes can make your code more manageable, overusing them can lead to excessive duplication and bloated stylesheets. Try to reuse existing classes whenever possible and avoid creating unnecessary classes with similar styles.

Practice Questions

Create a CSS class named .highlight that gives elements a yellow background and bold text.
Given the following HTML structure:

<div id="content">
<h1>Welcome to my website!</h1>
<p>This is some sample content.</p>
</div>

Write the CSS to center the heading and make the paragraph text blue.

Write a CSS rule that applies styles only to ` elements within ` elements.

FAQ

Q: Can I use IDs and classes together on the same HTML element?

A: Yes, you can apply both an ID and a class to the same HTML element by separating them with spaces in the class attribute (e.g., class="my-id my-class"). However, it's generally recommended to use classes for styling multiple elements and IDs for targeting specific elements when needed.

Q: How can I create a CSS class that applies styles only to certain HTML elements?

A: To apply styles specifically to certain HTML elements, use the element selector (e.g., h1, p, etc.) followed by the dot notation for the class name. For example, h1.my-class will style all ` elements with the specified class. Alternatively, you can use the descendant selector (e.g., header a.my-class`) to target specific combinations of elements and classes.

Q: How do I override styles defined in a CSS file when using multiple files?

A: To override styles defined in one CSS file from another, you can use more specific selectors or reorder the CSS rules so that the more specific or later rule takes precedence. Additionally, you can use the !important keyword to ensure that a particular style is always applied, but be cautious when using this as it can lead to hard-to-debug issues in your code.