Home esercizi css stile del testo

Esercizi Stile del Testo CSS

Pratica la personalizzazione del testo del tuo sito web, modificando font, dimensioni e colori attraverso le regole CSS. Aggiungi un tocco distintivo e coinvolgente al tuo contenuto testuale.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il colore del testo a blu.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo con testo blu.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il colore del testo a rosso e il font a Arial.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        color: red;
        font-family: Arial, sans-serif;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Questo è un link con testo rosso e font Arial.</a>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un elemento di intestazione (h1) all'interno. Usa il CSS per impostare la dimensione del testo a 24px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      h1 {
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h1>Questo è un titolo con dimensione del testo di 24px.</h1>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il grassetto sul testo del paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      p {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo con testo in grassetto.</p>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare lo stile del testo a corsivo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      a {
        font-style: italic;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Questo è un link con testo in corsivo.</a>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un elemento di intestazione (h2) all'interno. Usa il CSS per impostare il colore di sfondo del testo a giallo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      h2 {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Questo è un sottotitolo con sfondo giallo.</h2>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare la dimensione del testo a 18px e il colore di sfondo del testo a verde.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      p {
        font-size: 18px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo con testo di dimensione 18px e sfondo verde.</p>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il testo in maiuscolo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      a {
        text-transform: uppercase;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Questo è un link con testo in maiuscolo.</a>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un elemento di intestazione (h3) all'interno. Usa il CSS per impostare il testo sottolineato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      h3 {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h3>Questo è un sottotitolo con testo sottolineato.</h3>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare lo spazio tra le lettere (letter-spacing) a 2px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      p {
        letter-spacing: 2px;
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo con spaziatura tra le lettere di 2px.</p>
  </body>
</html>