Intestazione
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 36 di 43.
Sfida
FacileIl tuo compito è applicare uno stile alla sezione .header per farla risaltare nella parte superiore della pagina.
- Aggiungi un colore di sfondo scuro e del testo bianco per creare contrasto.
- Centra il testo all'interno dell'intestazione.
- Aggiungi un po' di spaziatura interna per dare spazio al contenuto.
- Usa una dimensione del carattere grande per mettere in risalto il titolo del sito.
- Aggiungi angoli arrotondati e un piccolo margine inferiore per separarla dalle altre sezioni.
Provalo tu
<html>
<head>
<title>FlavorFiesta</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="header">FlavorFiesta</header>
<section class="hero">
<h1>Delicious Recipes & Culinary Adventures</h1>
<p>Your daily dose of flavor, fun, and food!</p>
</section>
<section class="featured">
<h2>Featured Recipes</h2>
<div class="recipe-grid">
<div class="recipe-card">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
<p> Creamy Spinach Pasta</p>
</div>
<div class="recipe-card">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
<p> Classic Beef Burger</p>
</div>
<div class="recipe-card">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
<p> Quinoa & Avocado Salad</p>
</div>
</div>
</section>
<footer class="footer">
<p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
</footer>
</div>
</body>
</html>
Tutte le lezioni di Padronanza di CSS
1Padronanza dei selettori – Combinazioni
IntroduzioneSelettore discendenteSelettore figlioSelettore fratello adiacenteSelettore fratello generaleSfida di ripasso2Pseudo-classi interattive
Pseudo-classiEffetti al passaggio del mouseEffetti di focusStili attiviSfida di riepilogo3Classi pseudo-strutturali
Classi pseudo-strutturaliSelezionare il primo figlioSelezionare l'ultimo figlioIl potere degli schemi: usare nth-childSfida di riepilogoEsercitati da solo: Playground Web