What are HTML classes and how does the HTML class attribute work?
You can add an HTML element to an HTML class using the class attribute. Doing so lets you modify all the elements in a class in the same way using CSS or JavaScript.
- Store, share and edit data easily
- ISO-certified European data centres
- Highly secure and GDPR compliant
What are HTML classes?
HTML classes are used in HTML to identify and group elements in a web page. Class is one of the most important HTML attributes you should be aware of when learning HTML. Classes allow developers to style or manipulate multiple elements without having to address them individually.
The class attribute can be applied to any HTML element.
What are HTML classes used for?
HTML classes are part of the standard toolkit for web developers. They are essential, particularly for two areas of application:
- Styling elements with CSS: If you include CSS in your HTML, classes make it possible to define styles that can be applied to several elements at the same time. This allows you to keep the design of your website consistent and at the same time, make the CSS code modular.
- Manipulating elements with JavaScript: By using HTML classes, programmers can easily select specific groups of elements and manipulate them through JavaScript code. This is especially useful for dynamic interactions and user interfaces that need to respond to user behaviour.
What is the syntax of HTML classes?
Defining a class in HTML is straightforward. Simply add the class attribute to the element you want to assign a class to and provide it with a name. The name should describe the purpose or function of the class. Here’s what the code looks like:
<p class="Testclass">This text belongs to the class called ‘Testclass’.</p>In the example above, an HTML paragraph element was assigned to the ‘Testclass’ class.
Class names are case-sensitive. For example, ‘testclass’ and ‘Testclass’ would be considered two different HTML classes.
A more detailed example shows how useful classes are:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML classes example</title>
<style>
.highlight {
background-color: blue;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Here’s the HTML class example</h1>
<p class="highlight">This text is highlighted because it belongs to the ‘highlight’ class.</p>
<p class="highlight center">This text is highlighted and centred because it belongs to the ‘highlight’ and ‘center’ classes.</p>
</body>
</html>The layout and styling of the paragraphs and headings in the example above are controlled by HTML classes, which are referenced in the CSS. Keep in mind that to select an HTML class in CSS, you need to prefix the class name with a dot (.).
A single HTML element can belong to several classes. Simply list them one after the other, without separators.
What is the difference between HTML classes and HTML IDs?
Alongside the class attribute, HTML also offers the HTML attribute id. While both attributes have similar functions, it’s important not to confuse them, as there are several key differences between the two:
- Uniqueness: An ID must be unique within an HTML document, meaning no two elements can share the same ID. In contrast, classes can be shared by multiple elements in the same document.
- Referencing in CSS: To style classes in CSS, a preceding dot (.) is used, while for styling IDs, a preceding hashtag (#) is used.
- Specificity: IDs have a higher specificity than classes. This means that if both an ID and a class are applied to the same HTML element and define conflicting styles, the styles defined by the ID will take precedence. In this case, the class styles may be overridden.
- Free WordPress with .co.uk
- Free website protection with one Wildcard SSL
- Free Domain Connect for easy DNS setup