Ngôn ngữ CSS là gì?

CSS (Cascading Style Sheets) là ngôn ngữ tạo phong cách cho trang web. Ngôn ngữ CSS tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. CSS phân biệt cách hiển thị của website với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996. Thay vì đặt các thẻ quy định kiểu dáng cho văn bản HTML (hoặc XHTML) ngay trong nội dung của nó, bạn nên sử dụng CSS.

Phương thức hoạt động của CSS dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó, sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Nhiệm vụ của CSS

• CSS có thể thêm giao diện mới vào các tài liệu HTML cũ.
• Có thể thay đổi giao diện trang web của mình chỉ với một vài thay đổi trong mã CSS.

Bộ quy tắc của ngôn ngữ CSS

Bộ chọn (Selector)

Tên phần tử HTML bắt đầu của bộ quy tắc. Nó chọn các phần tử được tạo kiểu (trong trường hợp này là phần tử p). Để tạo kiểu cho một phần tử khác, chỉ cần thay đổi bộ chọn.

Tuyên bố (Declaration)

Một quy tắc duy nhất như: color: red; xác định thuộc tính của phần tử nào bạn muốn tạo kiểu.

Thuộc tính (Properties)

Những cách mà bạn có thể tạo kiểu cho một phần tử HTML. Trong trường hợp này color là một thuộc tính của phần tử

. Trong CSS, có thể chọn thuộc tính nào mà bạn muốn tác động trong quy tắc của mình.

Giá trị thuộc tính

Ở bên phải của thuộc tính sau dấu hai chấm (:), chúng ta có giá trị thuộc tính, mà chọn một trong số nhiều lần xuất hiện có thể cho một thuộc tính cụ thể (color có rất nhiều giá trị ngoài red).

* Lưu ý:

• Mỗi bộ quy tắc (ngoài bộ chọn) phải được bao bọc bởi các dấu ngoặc nhọn ({ }).
• Trong mỗi bộ khai báo, bạn phải sử dụng dấu hai chấm (:) để tách thuộc tính khỏi các bộ giá trị của nó.
• Trong mỗi bộ quy tắc, phải sử dụng dấu chấm phẩy (;) để phân biệt cho mỗi bộ quy tắc khai báo kế tiếp.

Công dụng của CSS

• Hạn chế tối thiểu việc làm rối mã HTML của website bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của trang Web được gọn gàng hơn, tách nội dung của chúng và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.
• CSS tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh lặp lại các định dạng cho một số website giống nhau. 

Sử dụng CSS

"Inline CSS": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style:

<span style="font-weight:bold; text-decoration:underline; color:#FF0000;">

Đoạn text cần in đậm, gạch chân, màu đỏspan>.

“Internal CSS": Đặt CSS ở đầu website để áp dụng kiểu dáng cho toàn bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ