HTML class Attribute
Html classes are the subject of our discussion. HTML elements can be classified using the class attribute.
The same class can be applied to multiple HTML elements.
Using The class Attribute
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:
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:
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”:
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:
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:
There are alot of people who write the code in this sytanx which is absolutely wrong. See example below
Here is another example using different class and id on a single page:
Here’s another example of it, by clicking on a button below you can hide all elements with the class name “city“:
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.