Stile del testo
Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 31 di 76.
Sfida
FacileIn questa attività personalizzerai la dimensione, il colore e lo stile del carattere per diversi elementi della pagina.
Segui i passaggi seguenti:
- Imposta la dimensione del carattere dell'elemento
<h1>su36pxe applica lo stileunderline. - Imposta il peso del carattere dell'elemento con la classe
welcomesu700. - Imposta la dimensione del carattere degli elementi
<h2>(i titoli delle categorie) su24pxe scegli un colore qualsiasi per il carattere (non nero). - Imposta il colore del carattere degli elementi con la classe
dish-namescegliendo un colore qualsiasi (non nero).
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