-
HTML Choosing Editors
-
HTML Basic Structure
-
HTML Head
-
HTML Element
-
HTML Attribute
-
HTML Headings
-
HTML Paragraphs
-
HTML Style
-
HTML Formatting
-
HTML Colors
-
HTML CSS
-
HTML Comments
-
HTML Links
-
HTML Images
-
HTML Table
-
HTML List
-
HTML Block and Inline
-
HTML Class & Id
-
HTML iFrames
-
HTML JavaScript
-
HTML File Paths
-
HTML Layout
-
HTML Responsive
-
HTML Style Guide
-
HTML Forms
HTML Class Attribute
The HTML class attribute is used to assign a class to an HTML element. Multiple HTML elements can share the same class.
Using the Class Attribute
The class attribute is often used with CSS to style elements. It can also be used in JavaScript to access and manipulate elements with a specific class name.
The class attribute can be used with almost any HTML tag, including <div>, <span>, <h1> to <h6>, <p>, <a>, <img>, <ul>, and <li>.
Example with div Elements
In the following example, we have three <div> elements with the class attribute “country”. All three <div> elements will be styled equally according to the .country style defined in the head section:
Creating a Class in CSS
In your CSS file or within a <style> tag in your HTML, create a class by writing a period (.) followed by the class name, and then define the CSS properties inside curly braces {}.
For Example : Create a class named “country”:
<style>
.country {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
Use the class attribute in your HTML elements to apply the styles defined in the CSS class:
<div class="country">
<h2>England</h2>
<p>England is part of the United Kingdom.</p>
</div>
<div class="country">
<h2>France</h2>
<p>France is known for its cuisine and art.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Japan is an island nation in East Asia.</p>
</div>
Example Without Using Classes
To achieve similar styling without using classes, you need to apply inline styles directly to each element. Here is how the previous example looks without classes:
Using classes makes applying the same styles to multiple elements easier without repeating the styles for each element.
Multiple Classes
HTML elements can belong to more than one class. This allows you to combine styles from multiple classes on a single element. To assign multiple classes, separate the class names with a space. For example, <div class=”country highlight”>. The element will be styled according to all specified classes:
Example of Using Multiple Classes
Here is an example demonstrating how to use multiple classes. In this example, we have two classes, .country and .highlight. The .country class applies general styling, and the .highlight class adds a specific style for highlighted elements:
In this example:
- The first <div> element has both the country and highlight classes, so it gets styles from both classes: a tomato background, white text, padding, margin, a green border, and bold text.
- The second <div> and The third <div> elements have only the country class and receive only the styles defined for that class.
