Menu
Coddy logo textTech

Sfida di ripasso #1

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 23 di 76.

challenge icon

Sfida

Facile

In questa prima sfida di ripasso, applicherai le tue conoscenze sulle proprietà di stile del testo in CSS per ricreare un design specifico. Questa sfida metterà alla prova la tua capacità di combinare diverse proprietà del testo, come color, font-family, font-size, font-weight, text-align e text-decoration.

Ti viene fornito un documento HTML con vari elementi. Il tuo compito è applicare proprietà diverse che hai imparato in questa sezione per definire lo stile di questi elementi. Segui i passaggi qui sotto:

  1. Scrivi una regola CSS che selezioni tutti gli elementi <h1>.
    • Imposta il colore su blu scuro.
    • Imposta la dimensione del carattere su 32px.
    • Imposta lo spessore del carattere su grassetto.
    • Imposta l'allineamento del testo al centro.
  2. Scrivi una regola CSS che selezioni tutti gli elementi con la classe intro-text.
    • Imposta il colore su grigio.
    • Imposta la famiglia di caratteri su Arial, Helvetica, sans-serif;
    • Imposta la dimensione del carattere su 18px.
  3. Scrivi una regola CSS che selezioni tutti gli elementi <li>.
    • Imposta lo spessore del carattere su 600.
  4. Scrivi una regola CSS che selezioni tutti gli elementi <a>.
    • Imposta la decorazione del testo su none.
    • Imposta il carattere sulla famiglia di caratteri che preferisci:  "Times New Roman", Times, serif.

Provalo tu

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Discovering the Ocean</h1>
    <p class="intro-text">The ocean covers 70% of the Earth's surface and is full of life. It also helps regulate the planet's climate.</p>
    <h2>Marine Life</h2>
    <ul>
        <li>Whales</li>
        <li>Octopuses</li>
        <li>Coral Reefs</li>
    </ul>
    <p>Learn more at <a href="https://www.oceans.org" target="_blank">The Ocean Conservation Society</a>.</p>
</body>
</html>

Tutte le lezioni di Stilizzare con CSS

Esercitati da solo: Playground Web