Más estilos

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 19 de 43.

Desafío

Fácil

Vamos a dirigirnos a párrafos y elementos de menú específicos y aplicar diferentes estilos a cada uno utilizando selectores estructurales y de hermanos.

Estiliza el primer párrafo (first child) dentro de .info-section. Cambia su tamaño de fuente (20px) y su grosor para que destaque.
Estiliza todos los párrafos que vienen después (general sibling) del que tiene la clase .intro. Añade un relleno para que sean más fáciles de leer.
Estiliza cada elemento de menú impar (nth-child) en la navegación superior. Dales un color diferente para crear un efecto de rayas.

Pruébalo tú mismo

<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>