CSS là gì?

  • CSS là viết tắt của Cascading Style Sheets
  • Styles định nghĩ cách hiển thị HTML
  • Styles được bổ sung vào HTML 4.0
  • External Style Sheets có thể tiết kiệm được rất nhiều thời gian
  • External Style Sheets được chứa trong CSS files
 

HTML được tạo ra để định nghĩa nội dung (content) và cấu trúc (structure) của 1 văn bản web (web document)

HTML không được tạo ra với mục đích chứa những tags để format (định dạng) văn bản web

<h1>Đây là heading / tiêu đề </h1>

<p> Đây là paragraph / văn bản </p>

Lấy ví dụ là những tag HTML trên chỉ mang những thông tin định dạng cơ bản mà không có bất kỳ tính năng nào cho phép developer có thể format văn bản như thêm màu sắc, thay đổi font chữ, cỡ chữ, background, ...

Ở HTML 3.2, tags có khả năng định dạng như <font> đã được thêm vào, tuy nhiên nó vẫn chưa đủ mạnh để giải quyết vấn đề format dữ liệu và việc tạo ra, duy trì các website lớn trở nên nỗi ác mộng cho các nhà thiết kế website khi cứ mỗi webpage họ lại phải add tag font và thông tin color khiến cho thời gian chỉnh sửa, format trang web rất lâu và tốn kém.

Chính vì thế, World Wide Web Consortium (W3C) tạo ra CSS để giải quyết vấn đề này.

Kể từ HTML 4.0, tất cả thông tin định dạng có thể được tách riêng ra khỏi tài liệu HTML (HTML Document) và đặt vào 1 file CSS riêng biệt chứa những thông tin định dạng văn bản web (web document formatting).

Chính vì thế, khi cần edit một kiểu format nào đó của document ta chỉ cần edit nội dung của file css và những tags liên quan sẽ tự động thay đổi theo.

CSS Syntax

CSS có 2 phần chính là selector và declaration.

css

1 định nghĩa trong CSS có thể có nhiều selector đi với nhiều declaration.

 

  • Mỗi declaration bao gồm property và value, cách nhau bởi dâu : (hai chấm) 
    VD color:blue
  •  Selector cách nhau bởi dấu , (phẩy) và declaration cách nhau bởi dấu ; (chấm phẩy) 
    VD h1, h2, h3 {color:blue;text-align:left;}
  • Selector phân biệt với declation bởi dấu ngoặc nhọn đóng, mở { declaration here } 
    VD p { color: blue; }

 

Ví dụ:

p {color:red;text-align:center;}

như các bạn thấy selector ở đây là tag p (<p>) còn declaration ở đây là color:red và text-align:center được cách nhau bởi dấu ; - Thông thường mỗi declaration nên nằm trên 1 line riêng biệt để dễ đọc.

Do đó, đoạn stylesheet bên trên có thể được viết lại như sau

p {
color:red;
text-align:center;
}

CSS Comments

Comments sẽ được bỏ qua bởi trình duyệt và nó giúp bạn đưa thông tin mô tả, bổ sung vào trong CSS của mình để giúp bạn hoặc team của bạn có thể đọc code dễ dàng hơn.

Comments bắt đầu với /* và kết thúc bằng */

Ví dụ:

/*This is a comment*/
p{
text-align:center;

/*This is another comment*/
color:black;
font-family:arial;
}