XQA
Back to Web Development
2026-02-105 min read

HTML Classes (Web Development)

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

Title: Mastering HTML Classes - A full guide for Web Developers

Why This Matters

HTML classes play a crucial role in web development by enabling us to style and manipulate elements dynamically. They are essential for creating responsive, interactive, and visually appealing websites. Understanding HTML classes can help you stand out in job interviews, solve real-world coding challenges, and build robust web applications.

The Power of Classes

HTML classes allow us to group elements with similar styling or behavior. By applying the same style rules to multiple elements using a single class definition, we can save time, improve maintainability, and ensure consistency across our websites. Additionally, HTML classes make it easier to create dynamic content by allowing us to manipulate elements using JavaScript based on their class names.

Prerequisites

To fully grasp the concept of HTML classes, you should have a basic understanding of:

  1. HTML syntax and structure
  2. CSS basics, including selectors, properties, cascading, and specificity
  3. The difference between inline, internal, and external styles
  4. Understanding the Document Object Model (DOM) and how to manipulate it using JavaScript
  5. Familiarity with Box Model concepts (Content, Padding, Border, Margin)
  6. Basic understanding of Flexbox and Grid layout systems

Core Concept

HTML classes are used to group elements with similar styling or behavior. They allow us to apply the same style rules to multiple elements without repeating the same code. To create a class, simply define it in the ` section of your HTML file or an external CSS file using the .class-name` syntax:

<style>
.myClass {
color: blue;
font-weight: bold;
text-align: center; /* Adding a new property */
padding: 20px; /* Updating an existing property */
}
</style>

To apply this class to an element, use the class="myClass" attribute in the HTML markup:

<p class="myClass">This paragraph has a blue and bold font with center alignment and padding.</p>

You can also add multiple classes to a single element by separating them with spaces:

<div class="myClass anotherClass">This div has two classes applied. It will inherit properties from both classes.</div>

CSS Specificity and Classes

When dealing with multiple selectors targeting the same elements, it's important to understand CSS specificity. In general, a class selector has a specificity value of 0,0,1, whereas an ID selector has a specificity value of 0,1,0,1. To override styles defined by a class, you can either increase the specificity of your CSS rule or use JavaScript to manipulate the element's style directly.

Worked Example

Let's create a simple HTML page with two paragraphs, one with the myClass class and another with an ID of myID. We will also add some CSS styles for both classes and ID:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Classes Example</title>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box; /* Enabling box sizing */
}

.myClass {
color: blue;
font-weight: bold;
text-align: center;
padding: 20px;
background-color: #f5f5dc; /* Adding a new property */
border: 1px solid black; /* Adding a border */
}

#myID {
background-color: yellow;
padding: 10px;
margin: 20px; /* Updating an existing property */
}

/* Style for list items */
ul li {
list-style-type: none;
margin: 0;
padding: 5px;
}
</style>
</head>
<body>
<h1 class="heading">HTML Classes Example</h1>
<nav>
<ul>
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
<main>
<section class="content">
<p class="myClass">This paragraph has a blue and bold font with center alignment, padding, background color, and border. It will also inherit the body's margin and padding due to box-sizing: border-box.</p>
</section>
<section id="myID">
<h2>Yellow Section with Padding and Margin</h2>
<p>This paragraph has a yellow background, padding, and margin. It will not inherit the body's styles due to its higher specificity.</p>
</section>
</main>
<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>

Common Mistakes

Forgetting to close the `` tag

Always remember to close your ` tag with `. Failing to do so will cause errors in your HTML document.

<!-- Incorrect -->
<style>
.myClass {
color: blue;
font-weight: bold;
}
</

Using spaces instead of dots in class names

When defining a class, use a dot (.) instead of a space to separate the class name from the opening curly brace.

<!-- Incorrect -->
<style>
.my Class {
color: blue;
font-weight: bold;
}
</style>

Applying multiple classes with commas instead of spaces

Use spaces to separate multiple class names when applying them to an HTML element.

<!-- Incorrect -->
<p class="myClass, anotherClass">This paragraph has two classes applied.</p>

Using IDs for multiple elements

IDs should be unique within a document, so using the same ID for multiple elements will cause errors and unexpected behavior. Instead, use classes to style or manipulate multiple elements with similar properties.

Practice Questions

  1. Create a new HTML file with a CSS reset and add a header, nav, main, and footer sections using the `` element. Apply a class to each section and style them accordingly.
  2. Given the following HTML:
<ul>
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>

Write the CSS to style all list items with a blue background and white text, centered alignment, and a border. Additionally, add some padding and margin to the list items.

FAQ

Can I use numbers in HTML classes?

Yes, you can use numbers in HTML classes, but it's recommended to prefix them with letters (e.g., .myClass01) to ensure consistent behavior across different browsers.

How do I target specific elements within a class using CSS?

To target specific elements within a class, use the combination of the class selector and other selectors like the ID or element name. For example:

<div class="myClass">
<p id="specificElement">This is a specific element.</p>
</div>

In this case, you can target the specific `` element using the following CSS:

.myClass #specificElement {
/* Your styles here */
}
HTML Classes (Web Development) | Web Development | XQA Learn