Javatpoint Logo
Javatpoint Logo

HTML Classes

Class Attribute in HTML

The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting elements.

Example:

Let's use a class name "Fruit" with CSS to style all elements.

Test it Now

Here you can see that we have used the class name "fruit" with (.) to use all its elements.

Note: You can use class attribute on any HTML element. The class name is case-sensitive.

Class Attribute in JavaScript

You can use JavaScript access elements with a specified class name by using the getElementsByClassName() method.

Example:

Let's hide all the elements with class name "fruit" when the use click on the button.

Test it Now

Multiple Classes

You can use multiple class names (more than one) with HTML elements. These class names must be separated by a space.

Example:

Let's style elements with class name "fruit" and also with a class name "center".

Test it Now

You can see that the first element <h2> belongs to both the "fruit" class and the "center" class.

Same class with Different Tag

You can use the same class name with different tags like <h2> and <p> etc. to share the same style.

Example:

Test it Now
Next TopicHTML Id Attribute




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials