Bài 4: Cấu trúc câu lệnh css

Cấu trúc câu lệnh css

Câu lệnh CSS bao gồm một bộ ba lựa chọn:

Selector (bộ chọn): là phần tử HTML mà bạn muốn áp dụng kiểu CSS. Selector có thể là tên thẻ HTML như <div>, <p>, <h1>, <a>,... hoặc là class hoặc id của phần tử HTML.

Property (thuộc tính): là thuộc tính của phần tử HTML mà bạn muốn thiết lập kiểu CSS, chẳng hạn như màu sắc, kích thước, vị trí, độ rộng, độ cao,....

Value (giá trị): là giá trị của thuộc tính đó, chẳng hạn như màu sắc đỏ, kích thước 20px, vị trí bên trái, độ rộng 50%.

Câu lệnh CSS được viết dưới dạng:

selector {
  property: value;
}

Ví dụ, để đặt màu chữ màu đỏ cho tất cả các phần tử <p> trên trang web của bạn, bạn có thể sử dụng câu lệnh CSS như sau:

p {
  color: red;
}

Nếu bạn muốn đặt màu chữ màu đỏ cho các phần tử có class là "example", bạn có thể sử dụng câu lệnh CSS như sau:

.example {
  color: red;
}

Nếu bạn muốn đặt màu nền màu xanh cho phần tử có id là "header", bạn có thể sử dụng câu lệnh CSS như sau:

#header {
  background-color: blue;
}

Lưu ý rằng bạn có thể đặt nhiều thuộc tính cho cùng một selector bằng cách sử dụng dấu chấm phẩy để ngăn cách các thuộc tính.