The Class Attribute

In addition to the ID attribute, another attribute that is valid in every HTML element is the “class” attribute.

<div class="unique-class-name" id="a-unique-id">

Like the ID attribute, the class attribute is an identifier and selector value for HTML elements. The class attribute groups similar types of elements together by using the same unique name value. This allows for easy styling of these elements with same CSS code.

The class attribute also serves to visually inform developers that certain elements content similar types of content, or serve a similar function on a page.

<h1 class="page-title">American Sport Descriptions</h1>

<div class="content-block" id="football-block">
    <h2 class="card-label">Football</h2>
    <p class="card-description" id="football-description">
        Football is an American sport of strategy and skill. American football
        evolved in the United States, originating from the sports of
        association football and rugby football. The first game of American
        football was played on November 6, 1869, between two college teams,
        Rutgers and Princeton, under rules based on the association football
        rules of the time.
    </p>
</div>

<div class="content-block" id="stock-car-block">
    <h2 class="card-label">Stock-Car Racing</h2>
    <p class="card-description" id="stock-car-description">
        Stock car racing is a form of automobile racing found mainly and most
        prominently in the United States. Traditionally, races are run on oval
        tracks measuring approximately 0.25 to 2.66 miles. The world's largest
        governing body for stock car racing is the American NASCAR, and its
        Monster Energy NASCAR Cup Series is the premier top level series of
        professional stock car racing. Top level races typically range between
        200 to 600 miles in length.
    </p>
</div>

Style Conventions

The class attribute follows the same technical naming conventions as the ID attribute. As with the ID attribute, the class attribute value should be as descriptive as possible about the function or element types groups, while prioritizing both brevity and readability.

More Than 1 Class

Unlike the ID attribute which should contain a single unique ID value, elements may have more than one class assignment. In this case, a space separates each class.

<div class="class-name-1 class-name-2 notice-the-space">
    Notice the space between each of the three class names.
</div>

{ TODO: }

Please read pages 176-184 from “Chapter 8: Extra Markup”, in the Duckett book.