Larghezza e altezza

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

In CSS, le proprietà width e height vengono utilizzate per impostare le dimensioni dell'area del contenuto di un elemento. Queste proprietà sono essenziali per controllare le dimensioni e il layout degli elementi nelle tue pagine web.

Ecco la sintassi di base per usare le proprietà width e height:

selector {
    width: value;
    height: value;
}

width: La larghezza dell'area del contenuto dell'elemento.

height: L'altezza dell'area del contenuto dell'elemento.

value: Il valore desiderato per la larghezza o l'altezza, che può essere specificato in pixel (px), em (em), percentuali (%) o altre unità CSS valide. Puoi anche usare la parola chiave auto per lasciare che il browser calcoli automaticamente la larghezza o l'altezza in base al contenuto.

Per esempio:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

In questo esempio, tutti gli elementi <div> hanno una larghezza di 300px e un'altezza di 200px, mentre tutti gli elementi <img> hanno una larghezza che occupa il 100% della larghezza dell'elemento genitore e un'altezza calcolata automaticamente per mantenere le proporzioni.

Sfida

Facile

Ti viene fornito un documento HTML con una divisione (<div>) e un'immagine (<img>). Il tuo compito è usare le proprietà width e height per impostare le dimensioni di questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <div>. Imposta width su 400px e height su 250px.
Scrivi una regola CSS che selezioni l'elemento <img>. Imposta width su 300px e height su auto.

Provalo tu

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>