Class attributes

When we wish to style a set of elements in the same way, we can use a class attribute. Like the IDAn attribute specifying a unique identifier for an element. attribute, this is a global attributeAn attribute that can be added to any element., and there is a lot of freedom in choosing values (as long as you use at least one character and no spaces). Unlike the IDAn attribute specifying a unique identifier for an element. attribute, more than one element can have the same value for the class attribute.

In fact, an element can be in more than one class, as in the example, where the last paragraph is in two classes, odd and last. This could be useful if, for example, one wished to style text of the odd and even paragraphs in alternating colours and increase the font size of those paragraphs with the class last. Notice that the correct syntax for the valueSpecific information for an attribute. of the class attribute is a list of all class names, each consecutive pair separated by a blank space.

The second paragraph has two attributes, namely an ID attribute and a class attribute. Having multiple attributes is a useful way of categorizing elements in various ways.

For the moment, without styling, there is not much to see in this example.

Glimpse of the future

Categorizing elements is particularly useful when adding style, which will we consider in the next module.

Note:

Hints:

  • undefined
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX