Bài tập thực hành CSS Selector - Từ cơ bản đến nâng cao

Sau khi đã tìm hiểu về các loại CSS Selector, hãy cùng thực hành qua các bài tập từ cơ bản đến nâng cao. Các bài tập này sẽ giúp bạn nắm vững cách sử dụng CSS Selector trong thực tế.

Bài tập 1: Styling cơ bản

Yêu cầu

• Tạo style cho các phần tử theo yêu cầu sau:
  • Tất cả các tiêu đề h2 có màu xanh dương
  • Các đoạn văn bản có class "highlight" có nền màu vàng
  • Các liên kết có màu xanh lá và không có gạch chân
  • Các nút có viền tròn và padding 10px

<!-- HTML -->
<div class="container">
    <h2>Tiêu đề chính</h2>
    <p class="highlight">Đoạn văn bản được highlight</p>
    <p>Đoạn văn bản thông thường</p>
    <a href="#">Liên kết</a>
    <button>Nút bấm</button>
</div>

/* CSS - Hãy viết code để thực hiện các yêu cầu trên */

Bài tập 2: Navigation Menu

Yêu cầu

• Tạo một navigation menu với các yêu cầu sau:
  • Menu items nằm ngang
  • Có hover effect
  • Item đang active có màu nền khác
  • Có border bottom cho item đang active

<!-- HTML -->
<nav class="main-nav">
    <ul>
        <li class="active"><a href="#">Trang chủ</a></li>
        <li><a href="#">Sản phẩm</a></li>
        <li><a href="#">Dịch vụ</a></li>
        <li><a href="#">Liên hệ</a></li>
    </ul>
</nav>

/* CSS - Hãy viết code để thực hiện các yêu cầu trên */