HTML (lingua di markup ipertestuale) è la lingua standard per la strutturazione di pagine Web. Mentre il foglio di stile a cascata viene utilizzato per fornire diverse proprietà di styling agli elementi HTML. Più specificamente, è possibile accedere agli elementi di HTML in CSS per nome dell'elemento, per selettori di classe o per selettori ID.

Tre metodi per aggiungere un foglio di stile CSS a un file HTML sono CSS interni, CSS in linea e CSS esterno. Tuttavia, questo articolo guiderà come aggiungere un foglio di stile esterno in HTML.

Cos'è un foglio di stile CSS esterno?

Il foglio di stile esterno è utile in modo da poter cambiare l'aspetto del nostro sito Web modificando solo un file. Il file HTML deve avere un collegamento al foglio di stile all'interno del ""Elemento, che verrà menzionato all'interno del componente di testa della pagina HTML.

L'esempio seguente dimostra diversi elementi HTML che saranno disegnati con le proprietà CSS utilizzando il foglio di stile esterno.

Esempio: come creare e collegare il foglio di stile esterno al file HTML?

Nel file HTML, prima, aggiungi un elemento Div con un nome di classe "principale". All'interno di questo, aggiungi

elemento che ha il nome di classe come "intestazione"Per fornire l'intestazione. IL

Elemento con ID come "parà"Viene quindi aggiunto per fornire contenuto di testo.

Passaggio 1: creare il file HTML

Di seguito è riportato il codice HTML per lo scenario discusso:

Questo è l'elemento intestazione

Questo è il div principale

Dato che non abbiamo fornito nessuno degli elementi HTML con proprietà di stile, la schermata di output sembrerà così:

Nella sezione successiva, creeremo un foglio di stile che contiene le proprietà di styling degli elementi che abbiamo creato nel file HTML.

Passaggio 2: creare un foglio di stile esterno

Crea un nuovo file e nominalo con un'estensione ".CSS". Aprilo e scrivi il codice come indicato nel blocco del codice seguente.

Style Main Div

.principale
larghezza: 500px;
Altezza: 200px;
Background-color:#001253;
Testo-align: centro;
imbottitura: 20px;
Margine: 0px Auto;
Border: 5px Solid RGB (194, 194, 189);
Font-Family: corsivo;

Le proprietà applicate agli elementi HTML nel foglio di stile esterno sono descritte di seguito:

• ".principale"Viene utilizzato per accedere alla classe dell'elemento Div, dove il"."Seguito dal nome della classe è noto come selettore di classe.
• "larghezza"La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento.
• "altezza"La proprietà viene utilizzata per l'impostazione dell'altezza dell'elemento.
• "colore di sfondo"La proprietà viene utilizzata per impostare il colore di sfondo.
• "allineamento"È la proprietà utilizzata per l'allineamento del testo.
• "imbottitura"È la proprietà utilizzata per aggiungere spazio al di sopra del contenuto del div.
• "margine"Con il valore 0px automatico rappresenta lo spazio 0px dalla parte superiore e inferiore e lo spazio uguale su sinistra e destra dell'elemento.
• "confine"La proprietà è impostata con il valore 5px solido RGB (194, 194, 189), dove 5px si riferisce alla larghezza del bordo, il solido è il tipo di linea e RGB (194, 194, 189) è il codice colore del bordo.
• "famiglia di font"Con il valore corsivo fa sembrare lo stile del carattere come se fossero scritti a mano.

Stile id para

#parà
Font-size: 25px;
Font-weight: audace;
Colore: #ffb9b9;

L'elemento id con il nome para dei

Elemento ID stile con le proprietà spiegate di seguito:

• "#parà"Viene utilizzato per accedere all'elemento ID di HTML. IL "#"Il segno è noto come selettore ID.
• "dimensione del font"La proprietà viene utilizzata per l'impostazione della dimensione del carattere.
• "Font-peso"Con il valore impostato come grassetto rende il carattere audace.
• "colore"La proprietà viene utilizzata per l'impostazione del colore dei caratteri.

Intestazione di stile

.intestazione
Colore: Whitesmoke;

Il colore del carattere dell'intestazione è impostato come "fumo bianco"Utilizzando la proprietà"colore".

Passaggio 3: collegare il foglio di stile esterno a HTML

Ora, nella sezione principale del file HTML, specificheremo il collegamento al foglio di stile esterno:

Diversi attributi possono essere utilizzati nel tag collegamento HTML. Gli attributi specificati nell'elemento collegamento sono descritti di seguito:

• "Rel"L'attributo viene utilizzato per informare il browser sul file importato, come il foglio di stile.
• "Href"L'attributo specifica il percorso del file.
• "tipo"L'attributo viene utilizzato per indicare il contenuto del file importato.

Come mostrato nell'immagine seguente, le proprietà di styling fornite nel foglio di stile esterno vengono applicate con successo:

Abbiamo imparato correttamente per collegare il file CSS al file HTML.

Conclusione

CSS è il foglio di stile a cascata che fornisce diverse proprietà di stile agli elementi HTML. Esistono tre modi per collegare il CSS all'HTML: CSS in linea, CSS esterno e CSS interno. In HTML, all'interno della sezione della testa, il collegamento al foglio di stile esterno verrà specificato utilizzando l'elemento. Questo articolo ha dimostrato la procedura per creare e collegare i fogli di stile esterno a HTML.