HTML Classes
In this page:
What is the class Attribute?
The class attribute is used to group multiple HTML elements together. By assigning a class name to various elements, you can apply identical styles or scripts to all of them simultaneously.
Note: Class names must begin with a letter and are highly case-sensitive.
Warning: Do not write spaces inside a class name, or the browser will treat them as multiple separate classes.
Example: What is the class Attribute?
<p class="highlight">First</p>
<p class="highlight">Second</p>Selecting Classes with CSS
To target and style classes inside your stylesheet, you use a dot (.) followed by your exact class name. This selects every element on the webpage possessing that class name.
Note: Using class selectors is the best practice for styling clean and scalable layouts.
Warning: Never start your CSS selector name with a dot inside your HTML class attribute itself.
Example: Selecting Classes with CSS
<style>
.highlight {
color: orange;
}
</style>
<p class="highlight">Styled by class</p>Using Multiple Classes Together
An HTML element is not limited to just one class. You can apply multiple class names to a single element by separating them with spaces. This allows you to combine layout and style classes dynamically.
Note: Use a utility-first approach by combining separate layout and color classes.
Warning: Ensure you separate multiple classes with spaces only, and do not use commas or semicolons.
Example: Using Multiple Classes Together
<div class="card large">Combined classes</div>Classes in JavaScript Selectors
Classes are not just for styling. Web scripts can target elements by their class names using methods like getElementsByClassName or querySelectorAll to perform actions on multiple items at once.
Note: Use class tags to capture and animate entire groups of elements with web scripts.
Warning: Be aware that script targets using classes return an array-like list of elements, not a single element.
Example: Classes in JavaScript Selectors
<script>
document.querySelectorAll('.highlight');
</script>
<p class="highlight">Targeted by script</p>Semantic Class Naming Styles
Writing random or messy class names makes your code hard to read and scale. Using descriptive, semantic naming patterns (like using hyphens to separate words) makes your layout structure clear to other developers.
Note: Use standard, hyphen-separated names like tool-container instead of toolcontainer.
Warning: Avoid naming classes after visual styles like red-text; use semantic names like warning-message instead so they remain accurate if you change colors later.
Example: Semantic Class Naming Styles
<div class="tool-container">Semantic, hyphenated class name</div>- Adding a dot prefix inside your HTML class attribute values (e.g., class=".card").
- Separating multiple classes with commas instead of standard spaces.
- Naming classes with vague visual terms like blue-box which become outdated when redesigning your site.
- The class attribute groups multiple HTML elements together for group styling and scripting.
- Select and style classes inside CSS using a dot prefix followed by the exact class name.
- Apply multiple classes to a single element by separating their names with spaces inside the class attribute.
The class attribute is fully supported across all modern and legacy web browsers natively.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: