Categories
HTML Tutorial Self-Learning

Class attributes in HTML, how to use them

[ad_1]

The class attribute in HTML is used to specify one or more class names for the HTML element. Refer to the following article of Taimienphi.vn to learn in detail the class attribute in HTML.


In the previous article, Taimienphi.vn introduced you to block element in HTML. The next article below Taimienphi.vn will introduce you more about class attributes in HTML.

under class learning html html

Class attributes in HTML

Table of Contents:
1. Class attributes in HTML
2. Use the class attribute for the inline element
2.1. Select element with specific class
2.2. HTML elements can contain multiple layers
2.3. Different cards have cards that share the same class
3. Using the Class attribute in JavaScript

first. Class attributes in HTML

As mentioned above, the class attribute in HTML is used to specify one or more class names for the HTML element.
This attribute can be used on any HTML element. CSS and JavaScript use class names to perform specific tasks for elements with the class name specified.
For example: The following is an example of a class attribute in HTML:

Class attribute in html

The results returned after applying the class attribute in HTML will look like this:

Crystal class in html 2

2. Use the class attribute for the inline element

The class attribute in HTML is also used on inline elements.
For example: In the following example we use the class attribute for the inline element:

Crystal class in html 3

The result returned after applying the class attribute in HTML to the inline element looks like this:

Crystal class in html 4

Note:
– Class properties can be used on any HTML element.
– Class name must be capitalized.

2.1 Selecting elements with a specific class

In CSS we can select elements with a specific class, by adding a dot character (.) Followed by the class name.
For example: The following is an example that illustrates how to select elements with a specific class:

Crystal class in html 5

The result will look like this:

Crystal class in html 6

2.2. HTML elements can contain multiple layers

HTML elements can contain one or more class names, each class name separated by spaces.
For example: The following example illustrates a multi-layered HTML element:

Crystal class in html 7

The result will look like this:

Crystal class in html 8

In the above example, the element h2 first in the class “city“and class”main“.

2.3. Different cards have cards that share the same class

Different tags like h2 and p can have the same class name, so can share the same style.
For example: The following example illustrates different tags that can share the same class:

under class 9

The result will look like this:

under class 10

3. Using the Class attribute in JavaScript

JavaScript uses class names to perform specific tasks for elements with the class name specified.
JavaScript can access elements with the specified class name using methods getElementsByClassName ().
For example: The following example illustrates how to use the class attribute in JavaScript:

Crystal class in html 11

The result will look like this:

under class 12

https://thuthuat.taimienphi.vn/thuoc-tinh-class-in-html-50636n.aspx
The above article Taimienphi.vn has just introduced you to the class attribute in HTML. In the next article, Taimienphi.vn will introduce you further id attribute in HTML. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article so that Taimienphi.vn can answer those questions to help you learn HTML well. more okay.

.

[ad_2]

Leave a Reply

Your email address will not be published. Required fields are marked *