Bài 6: Lựa chọn và áp dụng css cho thẻ

Lựa chọn và áp dụng css cho thẻ

Để lựa chọn và áp dụng CSS cho các thẻ HTML, bạn có thể sử dụng các bộ chọn (selectors) trong CSS. Dưới đây là một số bộ chọn phổ biến:

1. Selector theo tên thẻ: Bạn có thể áp dụng CSS cho tất cả các thẻ HTML cùng loại bằng cách sử dụng tên thẻ làm bộ chọn.

Ví dụ:

p {
  color: red;
}

2. Selector theo class: Bạn có thể áp dụng CSS cho tất cả các phần tử HTML có cùng class bằng cách sử dụng dấu chấm (.) theo sau là tên class.

Ví dụ:

.my-class {
  font-size: 16px;
}

3. Selector theo id: Bạn có thể áp dụng CSS cho một phần tử HTML duy nhất bằng cách sử dụng dấu # theo sau là tên id của phần tử đó.

Ví dụ:

#my-id {
  background-color: blue;
}

4. Selector con: Bạn có thể áp dụng CSS cho các phần tử HTML con của một phần tử khác bằng cách sử dụng khoảng trắng và tên thẻ của phần tử cha theo sau là tên thẻ của phần tử con.

Ví dụ:

div p {
  margin: 10px;
}

Trong ví dụ trên, quy tắc CSS sẽ áp dụng cho tất cả các phần tử <p> nằm trong phần tử <div>.

Sau khi lựa chọn được phần tử cần áp dụng CSS, bạn có thể định nghĩa các thuộc tính và giá trị cho phần tử đó như sau:

selector {
  property: value;
}

Ví dụ:

p {
  color: red;
  font-size: 16px;
}

Trong ví dụ trên, các thuộc tính color và font-size được định nghĩa cho tất cả các phần tử <p> trên trang web.