Quando si creano le pagine Web in formato HTML, è possibile applicare le proprietà di stile agli elementi al loro interno, tra cui proprietà width, utilizzando una combinazione di markup HTML e codice Cascading Style Sheet. È possibile applicare le proprietà di larghezza su elementi HTML in vari modi. Con alcuni elementi, è possibile includere una proprietà width direttamente, mentre con gli altri è necessario utilizzare il codice CSS. È inoltre possibile scegliere tra una serie di opzioni in termini di valori che si utilizzano nelle dichiarazioni di larghezza.

Elementi HTML

Alcuni elementi HTML possono includere un attributo di larghezza, anche se molti sviluppatori preferiscono utilizzare il codice CSS. Questo perché la separazione del contenuto della pagina Web da formattazione rende un sito più coerente e dà all'utente un maggiore livello di controllo su come la pagina viene visualizzata a loro. Tuttavia, ci sono alcuni vantaggi nell'utilizzo attributi larghezza, in particolare con l'elemento image. Se si desidera aggiungere un attributo width alle immagini, è possibile utilizzare il seguente codice di esempio:

<Img src = "picture.jpg" width = "200px" id = "pic" />

Il vantaggio di utilizzare questa proprietà è che il browser sa quanto spazio allocare per l'immagine prima che il file è effettivamente caricata.

CSS

Nella maggior parte dei casi, il codice sito imposta le proprietà di larghezza di elementi HTML in dichiarazioni CSS. Le dichiarazioni CSS possono apparire all'interno della sezione head di una pagina HTML o all'interno di un file CSS separato collegato a dalla sezione testa. Il seguente codice di esempio illustra la creazione di una sezione CSS nella testa pagina:

<Style type = "text / css">
/ Dichiarazioni di stile qui /
</ Style>

All'interno di questa sezione, è possibile aggiungere tutte le proprietà di stile necessari, con larghezze per gli elementi nella pagina.

Valori

Quando si imposta la larghezza utilizzando il codice CSS, è possibile utilizzare diversi tipi di valore. La seguente dichiarazione imposta un valore di larghezza fissa:
width: 600px;

In alternativa è possibile impostare la larghezza in percentuale di elemento principale di un elemento:

width: 50%;

Questo elemento occuperà metà della larghezza dell'elemento che lo contiene. Questo permette di regolare le pagine di diverse dimensioni dello schermo dell'utente, così come l'adattamento se l'utente ridimensiona la finestra del browser. Per impostazione predefinita, il browser calcolare la larghezza di tutti gli elementi, a meno che non si fornisce valori specifici. Per specificare che un elemento dovrebbe ereditare la sua larghezza da suo elemento genitore, è possibile utilizzare la seguente sintassi:

Larghezza: ereditare;

Identifiers

Per applicare le proprietà di larghezza agli elementi HTML in codice CSS, è necessario innanzitutto identificare gli elementi. Il codice di esempio riportato di seguito illustra l'impostazione della larghezza di tutti gli elementi di immagine in una pagina:

img {width: 80%; }

Per applicare larghezze agli elementi con un particolare attributo di classe, è possibile utilizzare la seguente sintassi:

.mainClass {width: 400px; }

Per impostare la larghezza per gli elementi con un particolare attributo ID, è possibile utilizzare il seguente codice:

piè di pagina {width: 90%; }