Ví dụ:

– Trang web của tôi có 100 phần tử, trong đó có 50 phần tử tôi muốn thiết lập chữ màu đỏ. Nếu dựa vào phương pháp thông thường thì chúng ta phải đến lần lượt 50 phần tử rồi thiết lập cho nó thuộc tính style với giá trị color:red

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Cách sử dụng thuộc tính class 01</p>
    <p style="color:red">Cách sử dụng thuộc tính class 02</p>
    <p>Cách sử dụng thuộc tính class 03</p>
    <p style="color:red">Cách sử dụng thuộc tính class 04</p>
    <p style="color:red">Cách sử dụng thuộc tính class 05</p>
    <p>Cách sử dụng thuộc tính class 06</p>
    <p>Cách sử dụng thuộc tính class 07</p>
    <p style="color:red">Cách sử dụng thuộc tính class 08</p>
    <p>Cách sử dụng thuộc tính class 09</p>
    <p style="color:red">Cách sử dụng thuộc tính class 10</p>
</body>
</html>

– Tuy nhiên, nếu sau này chúng ta muốn sửa lại thành một màu khác, chẳng lẽ chúng ta phải đi đến 50 phần tử đó để chỉnh lại !? Chưa kể đến ví dụ trên chỉ có 50 phần tử, còn trường hợp hàng trăm, hàng nghìn phần tử thì sao !?

– Từ đây, thuộc tính id & thuộc tính class được sử dụng để quản lý những trường hợp như thế này, chúng ta chỉ cần phân loại các phần tử một lần duy nhất. Sau đó, nếu muốn định dạng cho phần tử thì chỉ cần định dạng cho một phần tử, các phần tử còn lại sẽ được áp dụng theo.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hello{color:red;}
    </style>
</head>
<body>
    <p>Cách sử dụng thuộc tính class 01</p>
    <p class="hello">Cách sử dụng thuộc tính class 02</p>
    <p>Cách sử dụng thuộc tính class 03</p>
    <p class="hello">Cách sử dụng thuộc tính class 04</p>
    <p class="hello">Cách sử dụng thuộc tính class 05</p>
    <p>Cách sử dụng thuộc tính class 06</p>
    <p>Cách sử dụng thuộc tính class 07</p>
    <p class="hello">Cách sử dụng thuộc tính class 08</p>
    <p>Cách sử dụng thuộc tính class 09</p>
    <p class="hello">Cách sử dụng thuộc tính class 10</p>
</body>
</html>