Fogli in stile a cascata aka CSS è un linguaggio di styling che viene utilizzato per modellare elementi HTML che appaiono su Web Pages. CSS ti consente di generare fogli di stile riutilizzabili che possono essere utilizzati per modellare più pagine Web tutte in una volta. Questi fogli di stile risparmiano molto tempo e sono facili da mantenere. Ma ti sei mai chiesto come collegare i fogli di stile CSS ai documenti HTML? Bene, abbiamo riassunto la risposta per te in questo blog.

I tre modi usando i quali è possibile collegare CSS a HTML. Questi sono arruolati di seguito.

1. CSS in linea
2. CSS interno
3. CSS esterno

Tutti questi approcci sono stati discussi in questo blog.

Come collegare CSS in linea a HTML

Se stai adottando questo approccio, allora devi utilizzare l'attributo di stile del particolare elemento che desideri modellare. Inserire semplicemente lo stile nel tag iniziale dell'elemento.

Questo approccio non è raccomandato in quanto lo stile viene eseguito all'interno del tag iniziale di un particolare elemento che rende il codice difficile da leggere e mantenere. Inoltre, il CSS in linea non è riutilizzabile, pertanto, è necessario modellare ogni elemento separatamente rendendo ingombro il compito di styling, uccidendo così lo scopo dietro l'uso di CSS.

Qui abbiamo dimostrato questo approccio con un esempio.

Html

Come collegare CSS a HTML

CSS in linea

Nel codice sopra, vengono generati tre elementi che sono; ,

, E

. Tutti e tre vengono disegnati usando l'attributo di stile. Il contenitore Div è stato dato un po 'di imbottitura e bordo, nel frattempo, l'intestazione e il paragrafo hanno un certo colore di testo.

Produzione

Gli elementi sono stati disegnati usando CSS in linea.

Come collegare CSS a HTML internamente

Questo approccio indirizza gli utenti a modellare elementi utilizzando il tag nella sezione principale del documento HTML. È possibile utilizzare i nomi degli elementi o utilizzare classi o ID assegnati agli elementi per modellarli con CSS interno.

Per comprendere il funzionamento di questo approccio consultare l'esempio di seguito.

Html

Come collegare CSS a HTML

CSS in linea

Ancora una volta tre elementi che sono ,

, E

vengono generati, tuttavia, per modellarli, stiamo usando il tag nella sezione principale del documento. Si noti che poiché il codice sopra è costituito solo da tre elementi, quindi stiamo usando direttamente i nomi degli elementi per modellarli, tuttavia, quando ci sono più elementi di tipo simile, è possibile assegnare loro classi e ID per modellare ciascuno di loro diversamente. Il codice genererà lo stesso output di sopra.

Come collegare CSS a HTML esternamente

Questo approccio consente di collegare CSS a HTML utilizzando fogli di stile esterni. Questo approccio richiede di creare i tuoi fogli di stile in un file separato e quindi collegare questo file esterno al tuo file HTML utilizzando il tag.

Qui abbiamo allegato gli screenshot dell'editor di codice per dimostrare correttamente questo approccio.

Html

Questa schermata sopra mostra il file HTML. In questo documento non è necessario modellare gli elementi, basta posizionare i tuoi elementi in un modo in cui vuoi che appaia sulla pagina web. Allo scopo di collegare il foglio di stile, utilizzare semplicemente l'attributo e fornire il collegamento del file CSS all'attributo HREF del tag.

CSS

Questo screenshot rappresenta il foglio di stile CSS. In questo file semplicemente usa i nomi degli elementi o le classi/ID assegnati per modellarli. Il codice mostrato nelle schermate genererà anche lo stesso output.

Questo approccio è considerato come il miglior approccio poiché ti consente di generare fogli di stile separatamente, rendendo così il codice pulito, leggibile e mantenibile.

Conclusione

Per collegare CSS a HTML, ci sono tre approcci disponibili che sono; CSS in linea, CSS interno e CSS esterni. Inline CSS richiede di utilizzare l'attributo di stile di un particolare elemento nel tag iniziale per modellarlo, nel frattempo, CSS interno consente agli utenti di modellare gli elementi utilizzando il tag nella sezione principale del documento HTML. Infine, CSS esterno significa che devi generare fogli di stile in un altro file e collegarlo al documento HTML con il tag. L'approccio CSS esterno è preferito durante il resto perché rende il codice leggibile e mantenibile.