Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị:
Đối tượng {thuộc tính: giá trị}
Đối tượng thường là các tag HTML mà bạn muốn định nghĩa cách hiển thị. Thuộc tính là thuộc tính
hiển thị của đối tượng đĩ. Giá trị là cách mà bạn muốn một thuộc tính hiển thị như thế nào. Cặp
{thuộc tính: giá trị} được đặt trong dấu {}. Body {color: black}
Nếu giá trị gồm nhiều từ, đặt chúng trong dấu nháy đơi: p {font-family: "sans serif"}
Nếu bạn muốn định nghĩa nhiều thuộc tính của một đối tượng, phân cách các cặp thuộc tính: giá trị bằng dấu (;).
p {text-align: center; color: red}
Để định nghĩa Style được dễ đọc hơn:
P {
text-align: center; color: black;
font-family: arial }
III.2.1. Nhĩm nhiều đối tượng
Bạn cĩ thể định nghĩa một Style cho nhiều đối tượng cùng một lúc: h1, h2, h3, h4, h5, h6 {
color: green }
III.2.2. Thuộc tính Class
Với thuộc tính Class, bạn cĩ thể định nghĩa nhiều Style khác nhau cho cùng một đối tượng. Ví dụ,
bạn muốn cĩ hai Style cho cùng một tag <P>, nếu tag <P> nào cĩ class=right sẽ canh lề bên phải, class=center sẽ canh giữa:
p.right {text-align: right} p.center {text-align: center} Trong trang HTML:
<p class="right">
Đoạn này sẽ được canh phải.
</p>
Bạn cũng cĩ thể bỏ qua tên đối tượng để định nghĩa kiểu Style cho tất cả các thành phần cĩ Class mà bạn định nghĩa. Ví dụ:
.center {
text-align: center; color: red
}
Trong trang HTML sau, cả H1 và đoạn văn bản đều được canh giữa: <h1 class="center">
Tiêu đề này sẽ được canh giữa.
</h1>
<p class="center">
Đoạn này sẽ được canh giữa.
</p>
III.2.3. Thuộc tính ID
Thuộc tính ID cĩ thể dùng định nghĩa Style theo hai cách:
Tất cả các thành phần HTML cĩ cùng một ID.
Chỉ một thành phần HTML nào đĩ cĩ ID được định nghĩa.
Ví dụ sau, Style dùng cho tất cả các thành phần HTML cĩ ID là "intro": #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }
Ví dụ sau, Style chỉ dùng cho thành phần <P> nào cĩ ID là "intro" trong trang Web. p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }
III.2.4. Ghi chú trong CSS
CSS dùng cách ghi chú tương tự như ngơn ngữ C: các đoạn ghi chú bắt đầu bằng /* và kết thúc bởi */. Ví dụ:
p { text-align: center; /* Đây là phần ghi chú */ color: black; font-family: arial }