Thêm kiểu dáng

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 19 trên 43.

Thử thách

Dễ

Hãy nhắm đến các đoạn văn và mục trong menu cụ thể, rồi áp dụng kiểu khác nhau cho từng mục bằng bộ chọn cấu trúc và bộ chọn phần tử cùng cấp.

Định kiểu cho đoạn văn đầu tiên (phần tử con đầu tiên) bên trong .info-section. Thay đổi cỡ chữ (20px) và độ đậm để làm nổi bật đoạn văn.
Định kiểu cho tất cả đoạn văn nằm sau (phần tử cùng cấp tổng quát) đoạn có lớp .intro. Thêm khoảng đệm để giúp bạn đọc dễ hơn.
Định kiểu cho mọi mục menu lẻ (nth-child) trong thanh điều hướng phía trên. Đổi màu các mục này để tạo hiệu ứng sọc.

Tự làm thử

<html>
<head>
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <section class="menu-panel">
  <h2>Hobby Club</h2>
  <nav class="top-menu">
    <ul class="menu-list">
      <li class="menu-item">Photography</li>
      <li class="menu-item">Cooking</li>
      <li class="menu-item has-submenu">
        Games
        <ul class="submenu">
          <li>Board Games</li>
          <li>Card Games</li>
          <li>Video Games</li>
        </ul>
      </li>
      <li class="menu-item">Drawing</li>
      <li class="menu-item">Music</li>
    </ul>
  </nav>
  <div class="menu-controls">
    <input type="text" class="search" placeholder="Search activities..." />
    <button class="cta-button">Join a Club!</button>
  </div>
  <div class="info-section">
    <p class="intro">Welcome to the Hobby Club community!</p>
    <p>Joining a hobby club is a great way to meet people who share your interests.</p>
    <p>You can learn new skills, have fun, and even discover talents you didn’t know you had!</p>
   </div>
</section>
</body>
</html>