Bằng việc tạo ra các lớp, bạn có thể định nghĩa nhiều kiểu thể hiện khác nhau cho cùng một thẻ HTML và áp dụng mỗi lớp vào một vị trí cần thiết trên trang web
. ...
Các lớp gắn với 1 thẻ cụ thể. Ví dụ: Trên trang web của bạn có 3 loại đoạn văn: Đoạn văn canh lề trái, đoạn văn canh lề giữa và đoạn văn canh lề phải. Khi đó bạn có thể định nghĩa 3 lớp riêng biệt cho 3 loại đoạn văn
này như sau:
p.trai {text-align: left}
p.phai {text-align: right}
p.giua {text-align: center} ...
Tiếp theo, trong trang HTML bạn sử dụng như sau:
<p class="trai">Đoạn văn này được canh lề trái. </p>
<p class="phai">Đoạn văn này được canh lề phải. </p> <p class="giua">Đoạn văn này được canh lề giữa. </p> ...
Chú ý:
- CSS phân biệt chữ hoa và chữ thường giống như C++ do đó khi viết bạn cần phải cẩn thận trong việc sử dụng chữ hoa, chữ thường.
- Trong trang HTML, bạn chỉ được phép khai báo 1 thẻ thuộc duy nhất một lớp. Trái điều này mặc dù trình duyệt không báo lỗi nhưng các lớp sẽ không hoạt động được. Ví dụ về lớp sai:
<p class="trai" class="phai"> Đây là đoạn định nghĩa sai </p>
...
Các ví dụ ở trên là ví dụ về việc tạo các lớp bị "gắn chặt" với một thẻ nào đó, tức là ta không sử dụng được lớp này trong thẻ khác. Theo các khai báo ở trên, ví dụ dưới đây sẽ không hoạt động:
<td class="trai">Ví dụ này không hoạt động </td>
...
Các lớp không gắn với một thẻ cụ thể( có thể gắn với hầu như tất cả
các thẻ). Rất đơn giản, bạn có thể tạo ra một lớp mà lớp đó có thể gắn vào hầu như bất cứ thẻ nào trên trang web bằng cách bỏ tên
thẻ ở đầu đi nhưng nhớ giữ lại dấu chấm ( .).
Ví dụ:
Định nghĩa một lớp "giua" có thể gắn với bất cứ thẻ nào .giua{text-align="center"}
và trong trang HTML ta sử dụng như sau:
<p class="giua"> Đoạn văn này được canh lề giữa. </p> <td class="giua"> Câu này cũng được canh lề giữa. </p>