Esercizi Inserire CSS in HTML

Codegrind Team•Jul 16 2023

Pratica l’inserimento del CSS all’interno del tuo codice HTML con questi esercizi gratuiti, accompagnati da soluzioni pratiche. Migliora il design e lo stile delle tue pagine web con confidenza.

Esercizio 1

Inserisci CSS a scelta nel tag `style`

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Questo testo sarà rosso.</p>
  </body>
</html>

Esercizio 2

Collega un file CSS esterno

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Questo testo sarà blu.</p>
  </body>
</html>

p {
  color: blue;
}

Esercizio 3

Inserisci del CSS inline

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <p>Questo è un <span style="color: green;">testo colorato</span>.</p>
  </body>
</html>

Esercizio 4

Dai uno sfondo ad un paragrafo dal tag style e cambia colore del testo inline

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <p style="color: blue;">Questo testo sarà rosso.</p>
  </body>
</html>