HTML class Attribute
Html classes are the subject of our discussion. HTML elements can be classified using the class attribute.
An HTML element’s class attribute defines single or multiple class names. HTML elements can be customized with a class name in CSS and JavaScript. In CSS, associate this class with a unique class by writing a period (.) character followed by the class name.
The same class can be applied to multiple HTML elements.
Using The class Attribute
HTML Classes are commonly referenced by the class attribute in style sheets. JavaScript can also manipulate HTML elements whose class name matches the specific class name.
Our example contains three <div> elements with the “city” class attribute.
In this case, we are styling all three <div> elements equally according to the .city.
Head section style definition:
Example
This example shows two <span> elements with the class attribute set to “note”. In the head section, the .note style definition defines how both <span> tag will be styled:
Example
The Syntax For Class
Operating HTML classes, construct a class by writing a period (.) followed by its name. After that, specify the CSS properties within curly braces:
Create a class called “city”:
Example
Different Elements Can Share Same Class
When we talk about Html classes then, a class name can be assigned to multiple HTML elements.
In the following example, both <h2> and <p> belong to the “city” class:
Example
Multiple Classes
Multiple classes can be assigned to HTML elements.
You can define multiple classes by separating them with a space, for example, <div class=”city main”>. HTML classes will be used to style the element according to all its classes.
Here, the first <h2> element belongs both to the city class and to the main class so that it will inherit the styling of both:
Example
Wrong Syntax
There are alot of people who write the code in this sytanx which is absolutely wrong. See example below
Example:
Here is another example using different class and id on a single page:
Example:
Use of The class Attribute in JavaScript
Html elements can also be addressed by the class name in JavaScript based on the class name.
In JavaScript, the getElementsByClassName() method allows access to elements by their class names:
Here’s another example of it, by clicking on a button below you can hide all elements with the class name “city“:
Example:
Please do not worry if you don’t understand the code in the example above.
Class Attribute in HTML: Benefits
There are several advantages to using unique IDs in HTML:
Reusability: As mentioned earlier, the class attribute allows you to define a set of styles or behaviors that can be applied to multiple elements on a web page. This helps to reduce the amount of code you need to write and makes it easier to maintain and update your website.
Consistency: By using the same class names across different elements, you can ensure that your website has a consistent look and feel, which can help to create a professional and polished appearance.
Flexibility: The class attribute allows you to apply styles or behaviors to multiple elements with a single class name, which gives you more flexibility in your design and layout.
Specificity: The class attribute can be used in conjunction with other CSS selectors to create more specific and targeted styles. This can help to avoid conflicts and ensure that your styles are applied correctly.
Accessibility: By using meaningful class names, you can help to make your website more accessible to users who rely on screen readers or other assistive technologies.
Separation of concerns: By separating your HTML and CSS into different files and using the class attribute to apply styles, you can keep your code organized and easier to read and maintain.
