Cú pháp
Cú pháp của một CSS được tạo nền từ ba phần: một "bộ chọn - selector", một "thuộc tính - property" và một "giá trị - value": bộ chọn{thuộc tính:giá trị} "bộ chọn" thông thường là các phần tử/thẻ HTML mà bạn muốn chỉ định, thuộc tính là các tính chất mà bạn muốn thay đổi, và mỗi thuộc tính có thể mang được một giá trị. Thuộc tính và giá trị được phân cách bởi một dấu ":" và được bao bởi một dấu móc nhọn. Ví dụ: body{color:black}thì:- body: là "Bộ chọn". - color: là "thuộc tính". - black: là "value"Nếu giá trị có một chuỗi các từ liên tiếp để chỉ ra một tên nào đó, ta phải đặt chúng trong dấu nháy kép như thế này "...", Ví dụ:
p {font-family: "sans serif " } vì phông chữ có tên là "sans serif" về bản chất là có khoảng trống giữa từ "sans" và "serif" vì thế phải được đặt trong nháy kép. Lưu ý: Nếu bạn muốn chỉ định nhiều hơn một thuộc tính, bạn phải phân cách mỗi một thuộc tính bằng một dấu chấm phẩy. Ví dụ dưới đây chỉ ra cách làm thế nào để định nghĩa một phân đoạn được căn giữa với dòng chữ có màu đỏp {text-align:center;color:red} Để tạo ra những định nghĩa về style dễ đọc hơn, bạn có thể mô tả mỗi thuộc tính trên một dòng giống như sau:p
{
text-align: center;
color: black;
font-family: arial
} Nhóm các phần với nhau (Grouping)
Bạn có thể nhóm các bộ chọn. Phân cách mỗi bộ chọn bằng một dấu chấm phẩy. Trong ví dụ dưới đây chúng ta nhóm tất cả các thành phần "Header". Mỗi một thành phần header sẽ có màu xanh lá cây:
h1,h2,h3,h4,h5,h6
{
color: green
} Bộ chọn Lớp (The class Selector)
Với một "bộ chọn lớp" bạn có thể định nghĩa các style khác nhau cho cùng một kiểu thành phần HTML. Điều này nói nên rằng nếu như bạn muốn có hai kiểu của phân đoạn trong văn bản: một đoạn căn phải, một đoạn căn giữa. Đây là những gì bạn có thể làm với những kiểu đó: p.right {text-align: right} p.center {text-align: center} Bạn phải sử dụng "thuộc tính lớp" trong văn bản HTML của bạn:
<p class="right"> Phan doan nay se can ben phai. </p> <p class="center"> Phân đoạn này sẽ căn giữa. </p>Lưu ý: Chỉ một thuộc tính lớp có thể được chỉ định trên một thành phần HTML! Ví dụ dưới đây là sai(vì có 2 lớp trên một phần tử "p")
<p class="right" class="center"> This is a paragraph. </p>Bạn có thể cũng có thể bỏ qua tên thẻ trong bộ trọn để định nghĩa một style cái mà sẽ được sử dụng bởi tất cả các thành phần trong HTML mà có mặt trong một lớp nào đó. Trong ví dụ phía dưới, tất cả các thành phần HTML với class="center" sẽ được căn giữa:
.center {text-align: center}Trong đoạn mã phía dưới thì thành phần "h1" và thành phần "p" có class="center". Điều này có nghĩa là cả hai phần tử sẽ tuân theo những luật trong bộ chọn ".center": <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
Bộ chọn Mã (The id Selector)
Bộ chọn mã thì khác với bộ chọn lớp. Trong khi một bộ chọn lớp có thể ứng dụng cho một vài phần tử trong một trang, thì một bộ trọn mã luôn luôn áp dụng cho chỉ một phần tử Một thuộc tính ID(mã số) phải là duy nhất bên trong một văn bản Luật về style phía dưới sẽ tương ứng với một phần tử "p" mà có giá trị id là "para1":
p#para1
{
text-align: center;
color: red
} Luật về style phía dưới sẽ tương ứng với phần tử đầu tiên mà có giá trị id là "wer345": *#wer345 {color: green}Luật ở trên sẽ tương ứng với thành phần h1 này: <h1 id="wer345">Some text</h1>Luật dưới đây sẽ tương ứng với một thành phần p mà có giá trị id là "wer345":
p#wer345 {color: green}Luật trên đây sẽ không đáp ứng với thành phần h2: <h2 id="wer345">Some text</h2>
Lời chú thích trong CSS
Bạn có thể chèn một đoạn chú thích để giải thích mục đích đoạn mã của bạn, nó có thể giúp gợi nhớ lại cho bạn sau nhiều ngày làm việc. Một lời chú thích sẽ không được trình duyệt hiển thị. Một lời chú thích của CSS bắt đầu bằng dấu "/*" và kết thúc bằng dấu "*/", giống như những dòng chữ màu đỏ thế này:
/* Đây là dòng chú thích */
p
{
text-align: center;
/* Đây là dòng chú thích khác */
color: black;
font-family: arial
} 
