Colori e sfondi
Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 32 di 76.
Sfida
FacileIn questa attività, personalizzerai i colori di sfondo delle diverse sezioni del menu del café. Usa la tua creatività per scegliere colori che rendano il menu visivamente accattivante!
Segui i passaggi qui sotto:
- Applica un colore di sfondo all'intera pagina (
body). Scegli un colore adatto al tema di un café. - Applica un colore di sfondo e un colore del testo al piè di pagina (
footer) che si abbinino al design complessivo della pagina. - Sentiti libero di cambiare il colore di qualsiasi altro elemento per migliorare gli stili.
Provalo tu
<html>
<head>
<title>Café Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Café Delight</h1>
<p class="welcome">Welcome to our café! Enjoy a delicious meal.</p>
</header>
<div class="menu-category">
<h2>Appetizers</h2>
<ul>
<li>
<p class="dish-name">Bruschetta $5.99</p>
</li>
<li>
<p class="dish-name">Garlic Bread $3.50</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Main Courses</h2>
<ul>
<li>
<p class="dish-name">Spaghetti Carbonara $12.99</p>
</li>
<li>
<p class="dish-name">Grilled Chicken Salad $9.99</p>
</li>
</ul>
</div>
<div class="menu-category">
<h2>Desserts</h2>
<ul>
<li>
<p class="dish-name">Chocolate Cake $4.99</p>
</li>
<li>
<p class="dish-name">Cheesecake $5.49</p>
</li>
</ul>
</div>
<footer>
<p>© 2025 Café Delight - All rights reserved</p>
</footer>
</body>
</html>Tutte le lezioni di Stilizzare con CSS
4Fondamenti del testo
Colore del testoFamiglia di caratteriDimensione del carattereSpessore del carattereAllineamento del testoDecorazione del testoSfida di ripasso #1Sfida di ripasso #27Modello a scatola - Parte 1
Cos'è il modello a scatola?Spaziatura internaMarginiBordiLarghezza e altezzaSfida di riepilogo8Modello a scatola Parte 2
Dimensionamento del boxRaggio del bordoOverflowOmbra del boxSfida di ripassoEsercitati da solo: Playground Web