CSS acronimo di "Foglio di stile a cascata"È un linguaggio di progettazione che definisce come progettare una pagina web accattivante. Descrive l'aspetto e la formattazione di un sito creato in un linguaggio di markup. Di solito, CSS viene utilizzato insieme a HTML per impostare gli stili di siti Web e interfacce utente.

Foglio di stile a cascata

A cascata significa guardare, Stile significa design sull'elemento HTML/ aggiunta di stile ai documenti Web e Foglio significa pagina e.G. Documento della pagina Web.

Tipi di CSS

I CSS possono essere utilizzati in tre modi:

• CSS in linea: IL CSS in linea implementa lo stile su una riga.
• CSS interno: IL CSS interno Applica uno stile specificato su una singola pagina.
• CSS esterno: IL CSS esterno è un file separato e può essere utilizzato da più documenti/pagine HTML.

A tale scopo, importare semplicemente il collegamento esterno del file CSS all'interno della sezione principale.

Sintassi CSS

Diamo un'occhiata al seguente stile CSS per avere una migliore comprensione della sintassi CSS:

Nel frammento di cui sopra, P è un selettore che indica un elemento HTML che si desidera modellare. Mentre "in background-color" è una proprietà e "oro" è il suo valore.

Allo stesso modo "carattere" e "allineamento del testo" sono proprietà, mentre "medio" e "giusto" sono valori di queste proprietà.

Esempio 1: Questo esempio ti fornirà una visione approfondita di come funziona in linea CSS:

Benvenuti in Linuxhint.com

Il miglior sito per leggere articoli di alta qualità

Lo script sopra ha implementato un po 'di stile sul primo

Elemento usando CSS in linea. Verrà visualizzato il seguente output:

In questo esempio, ne abbiamo solo due

elementi e dobbiamo implementare lo stile su un solo elemento, quindi abbiamo utilizzato il CSS in linea. Quindi, ogni volta che dobbiamo modellare alcuni elementi HTML possiamo usare CSS in linea per ogni elemento.

E se avessimo centinaia di elementi HTML su una pagina E.G. Abbiamo cento

Pertanto, quando dobbiamo implementare uno stile unico sull'intera pagina useremo il CSS interno.

Esempio-2: Il seguente esempio implementerà lo stesso colore di sfondo, il colore del testo per l'intero corpo del documento HTML:

Benvenuti in Linuxhint.com

Il miglior sito per leggere articoli di alta qualità

Lo snippet sopra fornirà la seguente uscita:

E se dovessimo modellare più di una pagine? In tali casi, il CSS esterno verrà implementato. Solo un singolo file può modificare l'intero aspetto del sito Web. Pertanto, si consiglia di utilizzare sempre CSS esterni.

Se stai lavorando con CSS esterno devi determinare il nel sezione.

Esempio-3: Questo esempio creerà un file CSS per definire lo stile. Il collegamento a questo file verrà fornito nella sezione principale. Entrambi i file HTML e CSS sono riportati al grande:

Esterno.html

Benvenuti in Linuxhint.com

Il miglior sito per leggere articoli di alta qualità

Esterno.CSS

corpo
Background-color: Brown;
Colore: Goldenrod;
Font in stile: corsivo;

H1
colore nero;
Testo-align: centro;

L'output verificherà che il file CSS esterno sia collegato correttamente al file HTML:

Ordine in stile Cascade

Ora potresti avere una domanda? E se utilizziamo stili CSS in linea, interni ed esterni su una pagina web? Allora quale di essi verrà implementato? Quale stile ha la massima precedenza?

BENE! Se c'è un conflitto nella dichiarazione in stile CSS, il CSS in linea sostituirà CSS interni che a sua volta sovrascriverà il CSS esterno. Ciò significa che i CS in linea hanno una precedenza maggiore rispetto ai CS sia interni che esterni. Gli stili predefiniti del browser hanno la precedenza più bassa.

Se i vari stili CSS sono determinati allo stesso livello di precedenza, lo stile che è più vicino all'elemento mirato avrà una precedenza maggiore.

Esempio-4: Consideriamo il seguente esempio che determina i più stili:

Esterno.File CSS

corpo
Background-color: Brown;
Colore: Goldenrod;
Font in stile: corsivo;

Precedenza.File html

Benvenuti in Linuxhint.com

Il miglior sito per leggere articoli di alta qualità

Il codice sopra determina tre stili che l'output verificherà che il CSS in linea abbia la massima precedenza:

Vantaggi

1. Risparmia molto tempo durante lo sviluppo di qualsiasi pagina Web perché possiamo utilizzare un file CSS all'interno di più file HTML. Ad esempio, abbiamo più file HTML, quindi dobbiamo affrontare il loro aspetto, stile, ecc. Invece di implementare lo stile su ciascun file HTML separatamente, è meglio importare il file CSS in qualsiasi documento HTML che si desidera modellare.
2. Le pagine Web si caricano rapidamente perché CSS non utilizza più e più volte gli attributi HTML, invece crea solo una regola CSS per un tag e lo implementa in tutte le sue occorrenze nel file HTML.
3. CSS fornisce una facile manutenzione in quanto possiamo gestirlo in un singolo file. Supponiamo di avere dieci paragrafi in un documento e vogliamo cambiare il loro stile. Invece di farlo dieci volte, possiamo farlo una volta nel file CSS e verrà applicato a tutte le dieci occorrenze del

   elemento.

4. CSS fornisce compatibilità. Ciò significa che è compatibile con più dispositivi.

Conclusione

CSS è un linguaggio di design che crea attraenti pagine Web. Viene utilizzato per la creazione di stili e la personalizzazione di elementi HTML disponibili su una pagina web. Migliora la velocità del sito e fornisce una facile personalizzazione di qualsiasi pagina Web.

In questo post, sarai a sapere cosa sono CSS, come usare CSS e quali sono i vantaggi chiave del CSS. Inoltre, imparerai l'ordine di precedenza degli stili a cascata.