Home esercizi css dimensioni

Esercizi Dimensioni CSS

Metti alla prova la tua abilità nel rendere i tuoi elementi HTML flessibili e adattabili a diverse dimensioni dei dispositivi. Con queste esercitazioni di CSS, affina le tue competenze nel gestire height e width.

Esercizio 1

Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare la larghezza del paragrafo a 300px e l'altezza a 100px. Assicurati che la larghezza massima sia di 400px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      p {
        width: 300px;
        height: 100px;
        max-width: 400px;
      }
    </style>
  </head>
  <body>
    <p>
      Questo paragrafo ha una larghezza di 300px e un'altezza di 100px, ma non
      supera mai i 400px di larghezza.
    </p>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare la larghezza del link a 200px e l'altezza a 50px. Assicurati che l'altezza minima sia di 40px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      a {
        display: inline-block;
        width: 200px;
        height: 50px;
        min-height: 40px;
        background-color: lightblue;
        color: black;
        text-decoration: none;
        text-align: center;
        line-height: 50px;
      }
    </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 impostare la larghezza del div a 500px e l'altezza a 300px. Assicurati che la larghezza minima sia di 400px e l'altezza massima sia di 350px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        width: 500px;
        height: 300px;
        min-width: 400px;
        max-height: 350px;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div>
      Questo div ha una larghezza di 500px e un'altezza di 300px, ma non scende
      mai sotto i 400px in larghezza e non supera mai i 350px in altezza.
    </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 impostare la larghezza degli elementi di lista a 150px e l'altezza a 30px. Assicurati che l'altezza minima sia di 20px e la larghezza massima sia di 200px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      li {
        width: 150px;
        height: 30px;
        min-height: 20px;
        max-width: 200px;
        background-color: lightpink;
        margin: 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 impostare la larghezza del titolo a 400px e l'altezza a 80px. Assicurati che la larghezza massima sia di 500px e l'altezza minima sia di 70px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      h1 {
        width: 400px;
        height: 80px;
        min-height: 70px;
        max-width: 500px;
        background-color: lightyellow;
        text-align: center;
        line-height: 80px;
      }
    </style>
  </head>
  <body>
    <h1>
      Questo è un titolo con una larghezza di 400px e un'altezza di 80px, ma non
      scende mai sotto i 70px in altezza e non supera mai i 500px in larghezza.
    </h1>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare la larghezza del link a 250px e l'altezza a 40px. Assicurati che l'altezza massima sia di 50px e la larghezza minima sia di 200px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      a {
        display: inline-block;
        width: 250px;
        height: 40px;
        min-width: 200px;
        max-height: 50px;
        background-color: lightblue;
        color: black;
        text-decoration: none;
        text-align: center;
        line-height: 40px;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con un div all'interno. Usa il CSS per impostare la larghezza del div a 800px e l'altezza a 200px. Assicurati che la larghezza massima sia di 900px e l'altezza minima sia di 150px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      div {
        width: 800px;
        height: 200px;
        min-height: 150px;
        max-width: 900px;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div>
      Questo div ha una larghezza di 800px e un'altezza di 200px, ma non scende
      mai sotto i 150px in altezza e non supera mai i 900px in larghezza.
    </div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con una lista non ordinata (ul) contenente alcuni elementi di lista (li). Usa il CSS per impostare la larghezza degli elementi di lista a 180px e l'altezza a 40px. Assicurati che la larghezza massima sia di 200px e l'altezza minima sia di 30px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      li {
        width: 180px;
        height: 40px;
        min-height: 30px;
        max-width: 200px;
        background-color: lightpink;
        margin: 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 9

Crea una pagina HTML con un titolo all'interno. Usa il CSS per impostare la larghezza del titolo a 600px e l'altezza a 100px. Assicurati che la larghezza massima sia di 700px e l'altezza minima sia di 80px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      h1 {
        width: 600px;
        height: 100px;
        min-height: 80px;
        max-width: 700px;
        background-color: lightyellow;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>
      Questo è un titolo con una larghezza di 600px e un'altezza di 100px, ma
      non scende mai sotto gli 80px in altezza e non supera mai i 700px in
      larghezza.
    </h1>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con un link all'interno. Usa il CSS per impostare la larghezza del link a 300px e l'altezza a 60px. Assicurati che la larghezza massima sia di 350px e l'altezza minima sia di 50px.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      a {
        display: inline-block;
        width: 300px;
        height: 60px;
        min-height: 50px;
        max-width: 350px;
        background-color: yellow;
        color: blue;
        text-decoration: none;
        text-align: center;
        line-height: 60px;
      }
    </style>
  </head>
  <body>
    <a href="#">Clicca qui</a>
  </body>
</html>