Trong HTML, định nghĩa quy tắc kiểu dựa trên thuộc tính class của phần tử. Các phần tử có class đó sẽ được định dạng theo quy tắc đã định nghĩa. Đây gọi là class selector (bộ chọn lớp). Để chọn phần tử với class cụ thể, viết dấu chấm . theo sau là tên class, ví dụ: .black.
.black { color: #000000; }
Hiển thị nội dung màu đen cho mọi phần tử có class="black". Ví dụ: chỉ định dạng màu đen cho phần tử <h3> có class="black":
h3.black { color: #000000; }
Ví dụ khác: định dạng thẻ <p>. Qua ví dụ sau, định dạng tất cả <p> có class="device":
Ví dụ 1: Một class
<!DOCTYPE html> <html> <head> <style> p.device { background: #000000; color: #fffffF; } </style> </head> <body> <p>This is demo text</p> <p class="device">Information about devices.</p> <p>This is demo text</p> </body> </html>
Định dạng <p> có thể dùng nhiều class cùng lúc, ví dụ: device và accessories:
Ví dụ 2: Nhiều class
<!DOCTYPE html> <html> <head> <style> p.device { background: #000000; color: #fffffF; } p.accessories { text-align: center; } </style> </head> <body> <p class="device accessories">DEVICE DETAILS</p> <p class="device">Information about devices.</p> </body> </html>