The Class Attribute
Classes allow CSS and Javascript to access elements in the DOM. This allows elements to be styled or become dynamic.
With this ‘description’ class, we can style or get data from this element. The class attribute also allows multiple elements using the same class name to be handled in the same way.
In CSS, we can add style or behavior to our element by using the class selector in a style sheet.
.description {
font-family: Arial;
color: red;
font-size: 20px;
font-weight: bold;
}
That would return:
⚠️ class names are case sensitive
In JavaScript, we can also add color, but we can also make this element with the ‘description’ class dynamic or access its data using the description class name.
Syntax
All classes start with a period. Valid class names start with a letter(a-z)[A-Z]
, an underscore(_)
, or a hyphen (-)
.
In HTML, when creating class names, kebab case .kebab-case
is the preferred case, but in languages like JavaScript or frameworks like React, camelcase .camelCase
is widely used.
Written By: CreationSpacelab