Thử thách 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 16 trên 76.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có nhiều phần tử, bao gồm tiêu đề (<h1>, <h2>), đoạn văn (<p>), phần tử phân vùng (<div>) và danh sách không có thứ tự (<ul>) gồm các mục danh sách (<li>). Nhiệm vụ của bạn là dùng các loại bộ chọn khác nhau để tạo kiểu cho những phần tử này. Hãy làm theo các bước sau:

Viết một quy tắc CSS dùng bộ chọn theo tên thẻ để chọn tất cả phần tử <p>. Đặt màu chữ thành màu xanh dương và cỡ chữ là 16 pixel.
Thêm thuộc tính class có giá trị "highlight" vào phần tử <h2> và phần tử <div>.
Viết một quy tắc CSS dùng bộ chọn lớp để chọn tất cả phần tử có lớp "highlight". Đặt màu nền thành màu vàng.
Thêm thuộc tính id có giá trị "special" vào phần tử <ul>.
Viết một quy tắc CSS dùng bộ chọn ID để chọn phần tử có ID "special". Đặt màu nền thành màu xám nhạt và cỡ chữ là 20 pixel.
Viết một quy tắc CSS dùng bộ chọn nhóm để chọn tất cả phần tử <h1> và <li>. Đặt màu chữ thành màu đỏ.

Tự làm thử

<html>
<head>
    <title>Selection Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>