Weiteres Styling

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 19 von 43.

Aufgabe

Einfach

Lassen Sie uns gezielt bestimmte Absätze und Menüpunkte ansprechen und mit Hilfe von Struktur- und Geschwister-Selektoren unterschiedliche Stile auf diese anwenden.

Gestalten Sie den ersten Absatz (first child) innerhalb von .info-section. Ändern Sie seine Schriftgröße (20px) und sein Gewicht, um ihn hervorzuheben.
Gestalten Sie alle Absätze, die nach dem Absatz mit der Klasse .intro folgen (general sibling). Fügen Sie ein Padding hinzu, um sie besser lesbar zu machen.
Gestalten Sie jeden ungeraden Menüpunkt (nth-child) in der oberen Navigation. Geben Sie ihnen eine andere Farbe, um einen gestreiften Effekt zu erzielen.

Probier es selbst

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