CSS là một ngôn ngữ cho phép định nghĩa các bảng kiểu (style sheet) để cung cấp các quy tắc nhằm định nghĩa nên style cho các phần tử của trang.
CSS cho phép định nghĩa các thuộc tính của các phần tử trong trang web, làm cho trang web trở nên đẹp hơn, thu hút, hấp dẫn hơn. Các thuộc tính của CSS cho phép định nghĩa nên màu nền, màu chữ, phông chữ, kích thước, vị trí, đường viền, căn lề v.v… của các phần tử trên trang, đồng thời cho phép thiết lập nên bố cục trang.
CSS cung cấp 3 loại bảng kiểu (style sheet) như sau:
1. Inline style sheet
Đây là bảng kiểu được khai báo cho từng phần tử riêng biệt trên trang. Trong loại bảng kiểu này, các thuộc tính style của từng phần tử sẽ được khai báo thông qua thuộc tính style trong thẻ mở của phần tử đó. Kiểu style này sẽ có mức ưu tiên cao nhất, tuy nhiên phạm vi áp dụng lại hẹp nhất, nó chỉ áp dụng cho phần tử mà nó được khai báo.
2. Internal style sheet
Đây là loại bảng kiểu được định nghĩa bên trong thẻ <style> nằm trong phần <head> của trang web. Internal style sheet có phạm vi áp dụng là tất cả các phần tử trong một trang, và được sử dụng trong nội bộ trang web đó (phạm vi rộng hơn so với inline style sheet).
3. External style sheet
Là loại bảng kiểu được áp dụng cho nhiều trang web. Đây là loại bảng kiểu được định nghĩa tách biệt ra trong một file .css riêng, sau đó file này sẽ được nhúng vào trong từng trang web có tham chiếu đến nó. Loại bảng kiểu này có phạm vi áp dụng rộng nhất, nhưng mức ưu tiên sẽ thấp hơn hai loại trên.
Về mức ưu tiên áp dụng style sheet: Inline style à Internal style à External style.
Ta cứ nhớ quy tắc như sau: Loại bảng kiểu nào có phạm vi áp dụng càng hẹp, thì mức ưu tiên càng cao, và ngược lại.
Chúng ta sẽ đi vào thực tế ở phần tiếp theo dưới đây.
Các bước để định nghĩa và áp dụng các loại bảng kiểu.
Bước 1: Tạo trang HTML
Mở một trình soạn thảo, tạo mới một trang web. Sau đó chèn một số nội dung vào trang web.
Sau đó ta định nghĩa inline style và internal style rồi áp dụng vào cac phần tử trong trang web. Trong tài liệu này, ta đã định nghĩa style cho các phần tử <p> trong trang web, sau đó ta định nghĩa style cho riêng một phần tử <p> trong trang.
Bước 2: Định nghĩa external style
Mở cửa sổ trình duyệt, tạo mới một file .css, sau đó định nghĩa style trong file css này.
Bước 3: Tham chiếu đến file .css
Trong trang web, ta hãy tham chiếu đến file .css bằng thẻ <link>, để có thể áp dụng style trong file .css cho trang web.
Ở trong file .css này, ta đã định nghĩa style cho phần tử <H2>, sau đó áp dụng style này cho các phần tử <h2> trong trang web.
Bước 4: Xem kết quả
Sau khi đã định nghĩa trong style, ta hãy mở trang web trên trình duyệt để xem kết quả như hình bên dưới.
Như vậy là chúng ta đã biết định nghĩa và sử dụng CSS để tạo các loại bảng kiểu cho website. Bài tiếp theo chúng ta sẽ tìm hiểu về cách sử dụng bộ chọn Selector để xác định viết CSS cho phần tử nào trong trang web.