Câu 9: Tại sao việc sử dụng bộ chọn định danh quá nhiều trên một trang web lớn có thể không phải là cách tiếp cận tốt nhất?

• A. Vì bộ chọn định danh làm tăng kích thước tệp CSS.
• B. Vì bộ chọn định danh không được hỗ trợ tốt trên các trình duyệt cũ.
• C. Vì bộ chọn định danh có độ ưu tiên thấp, dễ bị ghi đè.
• D. Vì ID phải là duy nhất, việc sử dụng nhiều ID cho các kiểu lặp lại làm giảm khả năng tái sử dụng mã CSS.

Câu 10: Cho đoạn mã HTML: `

`. Quy tắc CSS `#main-content { margin-top: 20px; }` sẽ áp dụng cho phần tử nào?

• A. Phần tử `div` có ID là `header`.
• B. Phần tử `div` có ID là `main-content`.
• C. Tất cả các phần tử `div` trên trang.
• D. Phần tử `div` có class là `section`.

Câu 11: Bạn muốn tạo một kiểu CSS chung cho tất cả các nút (button) có class là `primary` và một kiểu riêng cho nút có ID là `submit-button`. Nếu nút `Gửi` tồn tại, quy tắc nào sau đây sẽ có độ ưu tiên thấp nhất khi định dạng nút này?

• C.

Câu 12: Giả sử bạn có CSS sau: `.box { padding: 10px; } #special-box { border: 1px solid blue; }`. Nếu một phần tử HTML là `

`, thì phần tử này sẽ có những kiểu gì?

• A. Chỉ có padding là 10px.
• B. Chỉ có border là 1px solid blue.
• C. Không có kiểu nào do xung đột.
• D. Cả padding 10px và border 1px solid blue (vì thuộc tính khác nhau).

Câu 13: Để áp dụng cùng một tập hợp các quy tắc định dạng (ví dụ: màu chữ, cỡ chữ, căn lề) cho nhiều phần tử khác nhau trên trang web (ví dụ: một số đoạn văn, một số mục danh sách), bạn nên sử dụng loại bộ chọn nào?

• A. Bộ chọn định danh (ID).
• B. Bộ chọn lớp (Class).
• C. Bộ chọn phần tử (Element).
• D. Bộ chọn phổ quát (Universal *).

Câu 14: Khi nào thì bạn buộc phải sử dụng bộ chọn định danh thay vì bộ chọn lớp?

• A. Khi muốn định dạng một nhóm các phần tử.
• B. Khi muốn định dạng một phần tử cụ thể nhưng có thể lặp lại kiểu đó ở nơi khác.
• C. Khi muốn định dạng tất cả các phần tử cùng loại (ví dụ: tất cả các thẻ `p`).
• D. Khi cần một điểm neo duy nhất trên trang để liên kết hoặc thao tác bằng JavaScript (mặc dù có thể dùng class, ID là chuẩn và có độ ưu tiên cao hơn).

Câu 15: Cho đoạn mã HTML: `

`. Quy tắc CSS `.card-title { font-weight: bold; }` sẽ áp dụng cho phần tử nào?

• A. Phần tử `h2` có class là `card-title`.
• B. Phần tử `div` có class là `card`.
• C. Phần tử `p` có class là `card-text`.
• D. Tất cả các phần tử trên trang.

Câu 16: Để áp dụng kiểu nền màu vàng chỉ cho phần tử `div` có ID là `sidebar`, quy tắc CSS nào sau đây là chính xác?

• A. .sidebar { background-color: yellow; }
• B. #sidebar { background-color: yellow; }
• C. div.sidebar { background-color: yellow; }
• D. div #sidebar { background-color: yellow; }

Câu 17: Một nhà phát triển web muốn tạo một class CSS có tên là `error` để hiển thị thông báo lỗi với chữ màu đỏ. Cú pháp HTML để áp dụng lớp này cho một thẻ `` là gì?

• A. ...
• B. ...
• C. ...
• D. ...

Câu 18: Cho các quy tắc CSS sau: `p { color: green; } .text-important { color: blue; }`. Đoạn mã HTML `

Văn bản này

` sẽ hiển thị màu chữ gì?

• A. Màu xanh dương (blue), vì bộ chọn lớp có độ ưu tiên cao hơn bộ chọn phần tử.
• B. Màu xanh lá cây (green), vì bộ chọn phần tử được khai báo trước.
• C. Màu mặc định của trình duyệt.
• D. Cả hai màu luân phiên.

Câu 19: Bạn có một biểu mẫu (`

• A. Bộ chọn lớp, vì bạn có thể có nhiều biểu mẫu.
• B. Bộ chọn định danh, nếu đây là biểu mẫu chính và duy nhất cần kiểu đặc biệt đó.
• C. Bộ chọn phần tử `form`.
• D. Sử dụng thuộc tính `style` trực tiếp trong thẻ `form`.

Câu 20: Điều gì xảy ra nếu bạn khai báo hai phần tử HTML khác nhau cùng có một thuộc tính `id` giống nhau, ví dụ: `

...

`?

• A. Trình duyệt sẽ báo lỗi và không hiển thị trang.
• B. Chỉ phần tử đầu tiên sử dụng ID đó được áp dụng kiểu CSS.
• C. Đây là hành vi không hợp lệ trong HTML; trình duyệt có thể áp dụng kiểu cho cả hai hoặc chỉ một, nhưng không đảm bảo và có thể gây lỗi JavaScript.
• D. Cả hai phần tử sẽ được áp dụng kiểu CSS như bình thường.

Câu 21: Cho đoạn CSS: `.btn { display: inline-block; } .btn-large { padding: 15px; }`. Nếu một phần tử HTML là `Liên kết nút`, kiểu hiển thị (`display`) và khoảng đệm (`padding`) của liên kết này sẽ như thế nào?

• A. display: none; padding: 0;
• B. display: inline; padding: 15px;
• C. display: inline-block; padding: 0;
• D. display: inline-block; padding: 15px;

Câu 22: Tại sao bộ chọn lớp (class selector) lại phổ biến và được khuyến khích sử dụng rộng rãi hơn bộ chọn định danh (ID selector) trong việc xây dựng các hệ thống CSS lớn?

• A. Vì bộ chọn lớp có thể tái sử dụng cho nhiều phần tử, giúp mã CSS gọn gàng và dễ quản lý hơn.
• B. Vì bộ chọn lớp có độ ưu tiên cao hơn bộ chọn định danh.
• C. Vì bộ chọn lớp được hỗ trợ tốt hơn trên các trình duyệt di động.
• D. Vì bộ chọn lớp cho phép đặt tên tùy ý, không bị ràng buộc bởi tính duy nhất.

Câu 23: Bạn muốn áp dụng một màu nền đặc biệt cho tất cả các thẻ `

Câu 24: Giả sử bạn có CSS: `div.main { color: blue; }` và HTML: `

`. Màu chữ của `div` này sẽ là màu xanh dương. Nếu bạn thêm một quy tắc CSS khác `#main-div { color: red; }` và sửa HTML thành `

`, màu chữ cuối cùng sẽ là gì?

• A. Màu đỏ, vì bộ chọn ID có độ ưu tiên cao hơn bộ chọn kết hợp phần tử và lớp.
• B. Màu xanh dương, vì bộ chọn kết hợp phần tử và lớp có độ ưu tiên cao hơn.
• C. Màu mặc định.
• D. Cả hai màu được kết hợp.

Câu 25: Mục đích chính của việc sử dụng bộ chọn lớp và bộ chọn định danh trong CSS là gì?

• A. Để làm cho trang web tải nhanh hơn.
• B. Để thêm các hiệu ứng động cho phần tử.
• C. Để xác định cấu trúc ngữ nghĩa của tài liệu HTML.
• D. Để áp dụng các quy tắc định dạng (kiểu dáng) một cách có chọn lọc cho các phần tử HTML cụ thể hoặc nhóm các phần tử.

Câu 26: Khi áp dụng nhiều lớp cho một phần tử HTML, ví dụ: `

`, các quy tắc CSS từ các lớp `.box`, `.shadow`, và `.rounded` sẽ được kết hợp như thế nào?

• A. Tất cả các quy tắc từ ba lớp sẽ được áp dụng, trừ khi có xung đột thuộc tính, khi đó quy tắc của lớp được khai báo sau cùng (hoặc có độ ưu tiên cao hơn) sẽ thắng thế.
• B. Chỉ quy tắc từ lớp đầu tiên (`.box`) được áp dụng.
• C. Chỉ quy tắc từ lớp cuối cùng (`.rounded`) được áp dụng.
• D. Các lớp này không thể áp dụng cùng lúc; đây là cú pháp sai.

Câu 27: Bạn muốn tạo một kiểu CSS áp dụng cho tất cả các phần tử `` có class là `external-link`. Quy tắc CSS nào làm được điều này?