Home esercizi css outline

Esercizi Outline CSS

Esplora come migliorare l’accessibilità e l’usabilità del tuo sito web con l’aggiunta di bordi di contorno ben definiti sugli elementi interattivi. Pratica l’utilizzo delle regole CSS per evidenziare chiaramente i punti di interazione per gli utenti.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per aggiungere un contorno rosso di 2px al paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        outline: 2px solid red;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <p>Questo paragrafo ha un contorno rosso di 2px.</p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per aggiungere un contorno tratteggiato blu di 1px al link al passaggio del mouse.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        outline: 1px dashed blue;
        padding: 5px 10px;
        color: black;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con un div all'interno. Usa il CSS per aggiungere un contorno verde di 3px al div e un margine interno di 20px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        outline: 3px solid green;
        padding: 20px;
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      Questo div ha un contorno verde di 3px e un margine interno di 20px.
    </div>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per aggiungere un contorno arrotondato blu di 2px agli elementi di lista.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li {
        outline: 2px solid blue;
        border-radius: 10px;
        padding: 5px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 5

Crea una pagina HTML con un titolo all'interno. Usa il CSS per aggiungere un contorno tratteggiato nero di 1px al titolo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      h1 {
        outline: 1px dashed black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Questo è un titolo con un contorno tratteggiato nero di 1px.</h1>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno. Usa il CSS per aggiungere un contorno rosso di 2px al link quando è attivo (stato "active").

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      a {
        outline: 2px solid transparent;
        padding: 5px 10px;
        color: black;
        text-decoration: none;
      }
      a:active {
        outline-color: red;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un titolo all'interno. Usa il CSS per aggiungere un contorno verde di 2px intorno al titolo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      h1 {
        outline: 2px solid green;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Questo è un titolo con un contorno verde di 2px.</h1>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una sezione divisa in due colonne (usando due div). Usa il CSS per aggiungere un contorno tratteggiato nero di 1px per ciascuna colonna.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      .colonna {
        height: 200px;
        width: 50%;
        float: left;
        box-sizing: border-box;
        outline: 1px dashed black;
      }
    </style>
  </head>
  <body>
    <div class="colonna"></div>
    <div class="colonna"></div>
  </body>
</html>

Esercizio 9

Crea una pagina HTML con un div all'interno. Usa il CSS per aggiungere un contorno rosso di 3px al div e un margine esterno di 30px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      div {
        outline: 3px solid red;
        padding: 20px;
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      Questo div ha un contorno rosso di 3px e un margine esterno di 30px.
    </div>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con una lista ordinata (ol) contenente alcuni elementi di lista (li). Usa il CSS per aggiungere un contorno blu di 2px e uno sfondo grigio chiaro agli elementi di lista.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      li {
        outline: 2px solid blue;
        background-color: #f2f2f2;
        padding: 5px;
        list-style-type: none;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ol>
  </body>
</html>