CSS sta per “Foglio di stile a cascata". È una lingua utilizzata per definire la presentazione delle pagine Web. È usato principalmente per strutturare e modellare le pagine HTML, come la regolazione della dimensione del carattere, il bordo dell'elemento, la posizione e molti altri. Più specificamente, CSS è una parte importante dello sviluppo web che rende le pagine Web attraenti e intuitive.

Questo post discuterà le basi del CSS e dei suoi usi.

A cosa è usato i CSS?

CSS viene utilizzato per specificare il layout e lo stile delle pagine Web. Controlla lo stile di una pagina web con l'aiuto di molte proprietà CSS.

Tipi di CSS

I seguenti tre tipi di CSS sono:

• CSS in linea
• CSS esterno
• CSS incorporato

Cos'è CSS in linea?

In HTML, un CSS in linea è incorporato direttamente con l'elemento con l'aiuto di "stile"Attributo. Viene utilizzato per regolare lo stile unico su un elemento particolare.

Esempio
L'esempio seguente dimostra una pagina HTML che applica un CSS in linea al "

"Elemento:

Linuxhint

Ecco la spiegazione delle proprietà CSS sopra menzionate all'interno del "stile"Attributo:

• "colore"Definisce il colore del carattere.
• "famiglia di font"Applica lo stile del carattere.
• "allineamento"Imposta l'allineamento del testo al centro, a sinistra o a destra.
• "dimensione del font"Determina la dimensione del carattere dell'elemento.

Produzione

Ciò che è incorporato CSS?

Quando le proprietà CSS sono dichiarate nel ""Elemento del documento HTML, questo tipo di CSS viene definito CSS incorporato.

Esempio
Nell'esempio fornito, abbiamo incorporato CSS in HTML:

Linuxhint

Si può osservare che abbiamo accesso all'HTML "

"Elemento per nome del tag e applicare le proprietà CSS di colore, font-family, allineamento di testo e di dimensioni del carattere, come discusso in precedenza.

Produzione

Cos'è CSS esterno?

Il foglio di stile esterno si riferisce al CSS esterno, che è scritto in un file separato. Questo file CSS viene quindi collegato al file HTML utilizzando ""Elemento nella sezione testa.

Esempio
Innanzitutto, crea un file HTML e specifica il ""Elemento insieme agli attributi" rel "e" href ". IL "Rel"Attributo Specificare la relazione tra HTML e il documento collegato e il"Href"L'attributo viene utilizzato per definire l'origine del file:

Linuxhint

CSS
Aggiungi lo snippet di codice seguente in "Stile.File CSS ":

H1
Colore: scuro;
Font-Family: Fantasy;
Testo-align: centro;
Font-size: 60px;

Produzione

Cosa sono i selettori CSS?

Gli elementi HTML che desideri modellare possono essere selezionati utilizzando un selettore CSS. Di seguito sono elencati alcuni dei più utilizzati diversi selettori in CSS:

• Selettori semplici
• Selettori di classe pseudo
• Selettori di attributi
• Selettori combinatori
• Selettori di pseudo-elementi

Prendiamo un esempio di alcuni selettori per una migliore comprensione.

Esempio: come utilizzare i selettori CSS semplici?
I selettori semplici selezionano gli elementi in base all'ID, al nome o alla classe. I blocchi di codice seguenti dimostrano l'esempio di selettori semplici:

• Aggiungere un ""Elemento con la classe"scatola".
• Poi aggiungi "

  "Elemento all'interno del" ":

Linuxhint

Selettore ID CSS
Il selettore ID si riferisce al "id"Attributo di un elemento. In CSS, il “#"Il simbolo è scritto per selezionare l'elemento per ID.

ID "Heading" di stile

#intestazione
Colore: scuro;
Font-Family: Fantasy;
Font-size: 60px;

Selettore di classe CSS
Il selettore della classe CSS seleziona gli elementi con particolare "classe"Attributi. In CSS, la classe è accessibile da "."Simbolo prima del nome della classe.

Classe "Box" di stile

.scatola
larghezza: 300px;
Bordo: 5px Solid RGB (214, 214, 214);
Margine: auto;
Testo-align: centro;
Background-color: RGB (255, 227, 218);

IL ".scatola"Viene utilizzato per accedere al"scatola"Classe e assegnare le seguenti proprietà:

• "larghezza"Regola l'ampiezza dell'elemento.
• "confine"La proprietà viene utilizzata per aggiungere un bordo attorno all'elemento.
• "margine"Genera spazio attorno all'elemento.
• "allineamento"Imposta l'allineamento del testo.
• "colore di sfondo"Imposta il colore di sfondo.

Produzione

Quelle erano tutte le basi del CSS.

Conclusione

Il foglio di stile CSS o a cascata descrive l'aspetto di un documento HTML. Fornisce centinaia di proprietà di styling per elementi HTML che possono essere applicati utilizzando CSS in linea, CSS incorporato e CSS esterno. In CSS, l'elemento HTML è selezionato da vari selettori CSS, come il selettore ID, il selettore di classe e così via. Questo post ha dimostrato ciò per cui CSS viene utilizzato.