Giới thiệu về bộ chọn

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 10 trên 76.

Trong CSS, bộ chọn là các mẫu dùng để chọn những phần tử HTML mà bạn muốn tạo kiểu. Chúng là một phần quan trọng của quy tắc CSS vì xác định kiểu sẽ áp dụng cho những phần tử nào.

Có nhiều loại bộ chọn khác nhau, mỗi loại nhắm đến các phần tử theo cách riêng. Hiểu về bộ chọn là nền tảng để thành thạo CSS và tạo ra các trang web được định dạng đẹp mắt.

Đây là một quy tắc CSS cơ bản có bộ chọn:

selector {
    property: value;
}

selector: Chọn các phần tử HTML cần tạo kiểu.
property: Thuộc tính kiểu mà bạn muốn thay đổi (ví dụ: color, font-size).
value: Giá trị bạn muốn đặt cho thuộc tính (ví dụ: blue, 16px).

Ví dụ:

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

Trong ví dụ này, p là bộ chọn (selector), nhắm đến tất cả phần tử đoạn văn. Các khai báo đặt màu văn bản thành màu xanh dương và kích thước phông chữ thành 16 pixel cho tất cả đoạn văn.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML. Dùng CSS nội bộ để tạo kiểu cho tài liệu với các thuộc tính sau:

Đặt màu nền của tất cả tiêu đề h1 thành green.
Đặt màu chữ của tất cả tiêu đề h1 thành white.
Đặt cỡ chữ của tất cả đoạn văn (p) thành 18px.

Bạn được cung cấp sẵn đoạn code CSS khởi đầu cho tài liệu này.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>