HTML has an attribute called class attribute.
you can think about class as a box of defined CSS properties, when you mention a class to any element then that element gets all the CSS property specified for that class.
A class is defined either in an external CSS document or inside <style> tag.
A class is defined starting with a dot ( . ) followed by class name. All CSS properties are
specified after that inside the curly braces
Defining and using a HTML class
To define a class :
- step 1: create a <style> tag in <head> tag.
- Step 2: write the name of your class starting with a dot ( . ) .
- step 3: Make curly braces.Define the CSS properties in side curly braces.
- step 4: Create a class attribute inside the tag you want to define those CSS properties and give it the name of your class within a double quote.
Multiple classes in single element
Multiple classes can be added to a single tag by giving a space between the class names.
Example: <p class="class1 class2 class3">...content...</p>
Adding class to similar objects
The class attribute can be added on any tag and a specific class added to any number of times.
All tags having the same class have the same properties.
A class can be given CSS property by any event on the webpage like- onclick(), onload(), onmouseover() etc.
We can select the class using document.getElementsByClassName("class-name") and call a function over any event targeting these classes.