CSS (un acronimo di CASCADING STyle SHeet) Specifica l'interfaccia del contenuto HTML. Il CSS consente di abbellire le pagine HTML specificando i colori, gli stili di carattere e molto più legati all'estetica delle pagine. Le proprietà definite usando CSS sono ereditate anche a tutti gli elementi del bambino. Ad esempio, se una proprietà CSS viene aggiunta al corpo del documento HTML, tutti gli elementi all'interno del tag del corpo adotteranno tale proprietà. Per evitare ciò che accade, è possibile specificare la proprietà a elementi figlio specifici.

Esistono vari modi per applicare CSS sul tuo documento HTML e sono definiti di seguito:

• In linea: Permette di aggiungere CSS all'interno di un tag HTML specifico
• Interno: Un codice CSS è scritto all'interno del tag Head (consigliato ma non necessario) di una pagina HTML
• Esterno: Un file CSS viene realizzato esternamente definendo tutte le proprietà. Viene aggiunto alla pagina HTML usando <collegamento> Elemento

Abbiamo compilato questa guida per dimostrare tutti i modi possibili per aggiungere CSS a una pagina HTML.

Come aggiungere CSS a una pagina web

Questa sezione descrive brevemente gli approcci disponibili per aggiungere CSS a una pagina HTML.

Come aggiungere CSS in linea

Come suggerisce il nome della tecnica, ti consente di aggiungere CSS a un singolo elemento HTML. IL stile L'attributo di un elemento è esercitato per farlo. Pratichiamo l'esempio di seguito per ottenere un'immagine più chiara di CSS in linea:

Esempio

Il codice scritto di seguito aggiunge gli stili a un tag HTML

Suggerimento Linux

:

Suggerimento Linux

• Il colore del testo è impostato su verde: per questo, il colore proprietà del stile viene utilizzato l'attributo
• Il testo di

  è centrato allineato: il allineamento La proprietà è utilizzata

• Il testo di intestazione sarà sottolineato: per farlo, il decorazione del testo Proprietà dell'attributo Style è impostato su sottolineare.

L'interfaccia web della pagina HTML sopra indicata viene visualizzata di seguito:

Oltre alle proprietà sopra dichiarate, pochi editor HTML mostrano l'elenco a discesa delle proprietà disponibili. Pertanto, si consiglia di scegliere saggiamente il tuo editor HTML, poiché la migliore selezione faciliterà il modo di aggiungere CSS alla pagina HTML.

Come aggiungere CSS interno

Il CSS interno viene aggiunto utilizzando il tag all'interno del Elemento di una pagina HTML. Diciamo che vogliamo aggiungere vari stili a corpo, paragrafi, E divisioni Utilizzato in una pagina HTML.

L'immagine visualizzata di seguito mostra le varie proprietà aggiunte a diverse sezioni della pagina HTML e tutte queste proprietà sono assegnate utilizzando il <stile> Elemento.

- Il colore di sfondo del corpo sarà nero

- I paragrafi avranno un testo rosso, la dimensione del carattere 1EM e il testo allineato a sinistra

- Il colore delle divisioni è antiquewhite e la larghezza delle divisioni dipende dalla larghezza del testo utilizzato:

Di seguito viene visualizzato l'interfaccia Web utilizzando le proprietà sopra:

Come aggiungere CSS esterno

Il CSS può essere aggiunto alle pagine Web realizzando un file CSS dedicato e quindi chiamandolo all'interno di una pagina. Il CSS esterno è abbastanza utile quando è necessario applicare lo stesso stile a varie pagine HTML. Questa sezione fornisce un post procedurale per creare e utilizzare un file CSS esterno:

Passaggio 1: creare un .File CSS

Innanzitutto, apri il tuo editor di codice e crea un file con .CSS Estensione (o l'editor può offrire l'opzione per salvare come file CSS). Il file che stiamo usando qui è chiamato come LinuxHintStylesheet ed è creato come segue:

Aperto un nuovo file nell'editor:

Successivamente, fai clic su Salva come:

Chiamato quel file con .Estensione CSS e CSS selezionato come tipo di file:

Passaggio 2: aggiungi gli stili al file CSS

Abbiamo aggiunto le seguenti proprietà di stile:

- Il colore di sfondo del corpo è cielo blu

- IL H1 avrà il bianco colore

- I paragrafi hanno il carattere familiare impostato Serif e la decorazione del testo contiene overline (riga sopra il testo) proprietà:

La seguente immagine visualizza il codice che contiene gli stili sopra indicati:

Passaggio 3: aggiungi il file CSS al documento HTML

Dopo aver creato e aggiunto stili a un file CSS, ora devi aggiungere il file alla pagina in cui si desidera applicare questi stili. Vogliamo aggiungere LinuxHintStylesheet A Linuxhint Documento HTML:

IL L'elemento di HTML viene utilizzato per importare CSS file. Inoltre, il Rel E Href La proprietà dell'elemento collegamento è esercitata per incorporare il file CSS. IL Rel L'attributo definisce la relazione tra il documento HTML e il file CSS. Mentre il Href La proprietà dell'elemento contiene il collegamento al file CSS.

Una volta eseguiti correttamente i passaggi precedenti, sarai in grado di caricare la tua pagina HTML con le proprietà sopra indicate.

Conclusione

CSS è una lingua per rendere presentabili le pagine Web (HTML/XML). CSS può essere aggiunto alle pagine Web adottando uno dei metodi menzionati in questo articolo. Il primo metodo utilizza l'attributo di stile di un elemento per aggiungere varie proprietà correlate al CSS. Il metodo interno pratica il linguaggio CSS usando l'elemento in tag. E l'ultimo metodo importa un file CSS esterno in una pagina Web specifica. Tutti questi metodi vengono utilizzati per aggiungere CSS a una pagina Web e la selezione di un metodo dipende dallo sviluppatore che il modo in cui intende aggiungere stili.