Như chúng ta đã biết mỗi lệnh trong CSS sẽ định dạng cho một hoặc nhiều thành phần HTML nào đó trong trang web (các thẻ trong HTML). Nhưng có khi trong thiết kế chúng ta mong muốn một số thành phần nào đó sẽ có những định dạng khác như khác về màu sắc, đường viên, size chữ. . .
Ví dụ ta viết CSS sau:
p {color: black; font-size: 12px}
Thì tất cả các thành phần p sẽ có màu đen, kích cỡ size 12px. Nhưng chúng ta muốn một số thành phần p có màu xanh, một số thành phần p khác lại có màu vàng.
Class và ID được gắn thêm vào thẻ HTML giúp ta có thêm lựa chọn để giải quyết vấn đề trên. Lúc này class và id trở thành các CSS selector.
Cách sử dụng class
Như đã nói ở trên, bây giờ ta sẽ định dạng cho một thành phần p có màu xanh, và một thành phần p có màu vàng. Và một thành phần p được hiển thị bình thường.
Như vậy ta sẽ thêm 2 class blue và yellow như sau:
<p>Đoạn văn bản hiển thị bình thường màu đen</p>
<p class=”blue”>Đoạn văn bản hiển thị màu xanh</p>
<p class=”yellow”>Đoạn văn bản hiển thị màu vàng</p>
Ta sẽ viết css như sau
p{ color: black; font-size: 13px}
Với mã CSS trên thì tất cả các thành phần p có màu đen, kích cỡ 13px.
Để đoạn thứ 2 có màu xanh ta viết như sau
.blue{ color: blue}
Để đoạn thứ 3 có màu vàng ta viết CSS như sau
.yellow{ color: yellow}
Như vậy ta thấy rằng, cách sử dụng là thêm dấu . trước tên class để gọi CSS selector.
Cách sử dụng ID
Cách sử dụng Id hoàn toàn giống class, ta chỉ thay dấu . bằng dấu # trước tên id
<p id="red">Đoạn văn bản hiển thị màu đỏ</p>
#red{ color: red}
Chú ý:
- Không đặt tên class bắt đầu bằng số, việc đặt tên class bắt đầu bằng số sẽ chỉ hỗ trợ trong trình duyệt Internet Explorer (IE).
- Không đặt tên id bắt đầu bằng số, nó sẽ không hoạt động trong trình duyệt Mozilla/Firefox.
Sự khác nhau giữa class và ID
- Sự khác biệt lớn nhất giữa class và Id là ID là duy nhất, còn class thì có nhiều. Trong một trang web không thể tồn tại hai id có cùng tên. Nhưng có thể sử dụng nhiều css có cùng tên cho các thành phần khác nhau.
- Điểm khác biệt thứ 2 giữa class và id là có thể sử dụng nhiều class cho một thành phần nào đó, còn id thì chỉ một. Đoạn mã sau cho thấy cách sử dụng 2 class có tên bor và top cho một thành phần p
<p class="bor top">Nhiều class cho một thành phần</p>