CSS – Cú pháp và cấu trúc CSS

CSS hoạt động dựa trên nguyên tắc: chọn phần tử HTML → áp dụng kiểu dáng thông qua các thuộc tính và giá trị. Cấu trúc cơ bản như sau:

selector {
  property: value;
  property: value;
}

1. Selector (Bộ chọn)

Selector là thành phần dùng để xác định phần tử HTML mà bạn muốn định dạng.

🔹 Các loại selector phổ biến:

• Tên thẻ: Chọn tất cả thẻ HTML cùng loại p { color: blue; } → Áp dụng cho tất cả thẻ <p>

• Class: Chọn phần tử có class cụ thể .title { font-size: 24px; } → Áp dụng cho phần tử có class="title"

• ID: Chọn phần tử có ID cụ thể #main { background-color: yellow; } → Áp dụng cho phần tử có id="main"

2. Property và Value

Property là thuộc tính định dạng (như màu sắc, kích thước, khoảng cách…), còn Value là giá trị bạn gán cho thuộc tính đó.

🔹 Ví dụ phổ biến:

• color: red; → màu chữ đỏ

• font-size: 16px; → cỡ chữ 16 pixel

• margin: 10px; → khoảng cách bên ngoài 10px

Bạn có thể áp dụng nhiều thuộc tính cho một selector:

h1 {
  color: green;
  font-family: Arial, sans-serif;
  text-align: center;
}

/* Đây là ghi chú */

/* Định dạng tiêu đề chính */
h1 {
  color: navy;
}

<h1 class="title">Chào mừng bạn đến với CSS</h1>
<p id="intro">Đây là đoạn giới thiệu.</p>

.title {
  color: orange;
  font-size: 28px;
}

#intro {
  color: gray;
  font-style: italic;
}