Cosa sono i fogli di stile a cascata e per cosa vengono utilizzati i CSS?

CSS appartiene a una tripletta di tecnologie web di base insieme a HTML e JavaScript. Con un’attenta pianificazione, CSS contribuisce a una separazione delle preoccupazioni. Risorse indipendenti controllano la struttura di un contenuto, la sua presentazione e il suo comportamento.

I fogli di stile svolgono un ruolo importante nell’accessibilità, scalabilità e persino nelle prestazioni web. In qualità di autore di contenuti o web designer, ti danno il controllo sul modo in cui i dispositivi visualizzano i contenuti. Dal layout alla dimensione e al colore del carattere, i CSS trasformano i contenuti in pagine dall’aspetto accattivante.

Che aspetto hanno i CSS?

Il CSS è un grande linguaggio: ci sono molte cose diverse da applicare allo stile! Ma la sua sintassi è semplice, con solo poche regole da imparare.

Gli elementi HTML hanno varie proprietà che i CSS possono applicare allo stile. La proprietà color imposta il colore di primo piano (ad esempio il testo). La dimensione del carattere dipende dalla proprietà della dimensione del carattere .

Ogni proprietà può essere impostata su un valore supportato. L’assegnazione di un valore a una proprietà è una “dichiarazione”. In generale, hanno questo aspetto:

property: value

Per esempio:

color: red

I valori per proprietà diverse possono avere un aspetto molto diverso, anche i valori per la stessa proprietà. Ad esempio, ecco altri due modi per scrivere la dichiarazione precedente:

color: #ff0000
 color: rgb(255, 0, 0)

Come si incontrano HTML e fogli di stile

Puoi combinare HTML e CSS in diversi modi, ciascuno con i suoi vantaggi.

Stili di scrittura in linea

Il metodo più semplice è allegare dichiarazioni di stile direttamente a un elemento nel file HTML. Puoi farlo usando l’attributo style in questo modo:

<body style="color: red">
 <p>Most of this text is red …</p>
 <p style="color: blue">… but this isn't!</p>
 </body>

Sebbene gli elementi di stile in linea come questo possano essere convenienti, presenta diversi inconvenienti. Per cominciare, complica l’HTML, rendendolo più difficile da leggere a colpo d’occhio. È anche scomodo da mantenere: immagina un lungo documento in cui vogliamo impostare il colore di ogni paragrafo. Questo è CSS, ma non è “Fogli di stile”.

Stili incorporati nella testa

Puoi iniziare a vedere come appare un foglio di stile con il secondo meccanismo, l’ incorporamento . Usando questo approccio, ci riuniamo tutte le dichiarazioni di stile insieme all’interno di un elemento di stile nella testa del nostro documento. Assomiglierà a questo:

<!DOCTYPE html>
 <html>
 <head>
 <style>
 /* style instructions go here */
 </style>
 </head>
 <body>
 ...

Tuttavia, le nostre istruzioni di stile richiedono un po ‘più di dettagli rispetto a prima. Poiché le abbiamo spostate in testa, ogni regola non è più associata a un elemento. Avremmo potuto dichiarare il colore: rosso , ma cosa dovrebbe avere quel colore?

È qui che entrano in gioco i selettori CSS . Ci consentono di indirizzare parti specifiche della pagina e definire il loro stile in un unico punto, utilizzando questa sintassi:

selector {
 declaration1;
 declaration2;
 /* etc. */
 }

Ad esempio, per applicare uno stile al testo dei paragrafi in blu, possiamo specificare quanto segue:

p {
 color: blue;
 }

In questo esempio, il selettore è semplicemente p , che corrisponde a tutti gli elementi del paragrafo nel nostro documento. Colorerà tutto il testo di blu, purché sia ​​nei tag <p> .

Collegamento di un foglio di stile esterno

L’ultimo metodo da coprire è il collegamento. Questo è di gran lunga l’approccio più utile e quello che dovresti optare per la maggior parte del tempo. Invece di incorporare le regole CSS nell’elemento di stile direttamente nel documento, puoi spostarle in un file separato.

<link rel="stylesheet" href="styles.css" />

Incolla questo codice all’interno dei tag <head> del tuo file HTML per collegare il tuo foglio di stile esterno.

Il potere dei CSS

Con il metodo collegato, stiamo sfruttando una potenza fondamentale dei CSS: la separazione delle preoccupazioni. Tutte le informazioni semantiche, il significato del contenuto, sono contenute nel documento HTML. Lo stile, quello che sembra, è in un file separato, il foglio di stile.

Ecco solo alcuni vantaggi di questa separazione:

  • Puoi cambiare un foglio di stile semplicemente cambiando il riferimento al file. Questo può anche accadere dinamicamente. In un solo passaggio, puoi modificare l’intero aspetto di una pagina.
  • Molte pagine possono condividere gli stessi fogli di stile come richiesto. Modificando un singolo file, puoi aggiornare l’aspetto di un intero sito web.
  • La suddivisione di una pagina in “contenuto” e “stile” presenta vantaggi tecnici. Proxy e browser possono memorizzare nella cache singoli file separatamente. Ciò significa che un sito può inviare le sue informazioni di stile una volta, invece di includerle in ogni singola pagina.
  • Quando collaborano, diversi team possono lavorare sui propri punti di forza, creando e modificando file separati senza influenzarsi a vicenda.

Spiegando la cascata

Hai imparato molto sugli stili e sui fogli di stile, ma per quanto riguarda la parte “a cascata” dei CSS?

La cascata è ciò che decide quali stili utilizzare quando sono presenti più fogli di stile. Hai visto come un autore può specificare gli stili per il proprio contenuto. Ma un’altra caratteristica dei CSS è che offre ai lettori e ai produttori di browser anche qualche voce in capitolo.

Forse ti sei già chiesto degli stili predefiniti. Ad esempio, in che modo un elemento H1 appare grande e in grassetto, anche senza fogli di stile dell’autore? Questo grazie a una serie di regole speciali che compongono il foglio di stile del programma utente. Queste regole vengono inizialmente applicate dal tuo browser web a ogni pagina che visiti.

La cascata specifica che un foglio di stile dell’autore si applica dopo gli stili dell’agente utente. Se il nostro browser dice “i titoli sono in grassetto” ma l’autore della pagina dichiara “i titoli di questa pagina sono chiari”, allora risulteranno chiari.

C’è un’altra fonte di fogli di stile che passa un po ‘di controllo al lettore. Qualsiasi utente web può, in teoria, mantenere un foglio di stile utente con regole personalizzate. Queste si trovano nel mezzo: le regole utente sovrascriveranno le impostazioni del browser predefinito, ma saranno esse stesse sovrascritte dagli stili dell’autore. Purtroppo, il supporto per i fogli di stile utente non è mai stato diffuso.

Targeting di media diversi

Puoi utilizzare i fogli di stile in diversi contesti, oltre lo schermo. L’attributo media dell’elemento link definisce a quali tipi di media si applica il foglio di stile. Ad esempio, puoi definire un foglio di stile per la stampa utilizzando un markup come il seguente:

<link rel="stylesheet" href="print.css" media="print" />

È possibile raccogliere stili comuni in un foglio di stile globale e stili specifici del supporto in file separati. Esistono anche tipi di media per soddisfare le presentazioni audio o braille dei tuoi contenuti. I CSS sono uno strumento fondamentale per migliorare l’accessibilità.

Correlati: Come navigare sul Web se sei cieco o ipovedente

Siti come Wikipedia utilizzano i CSS per controllare il proprio stile di stampa, nascondere elementi indesiderati e semplificare il layout.

CSS rende HTML un bell’aspetto

I fogli di stile a cascata coprono molto: la cascata, l’ereditarietà, i selettori, le fonti, i media, ecc. Ma il loro potere abilita il web moderno. Questo è un mezzo che fornisce funzionalità integrate di riusabilità, flessibilità e accessibilità.

Per vedere tutta la potenza dei CSS e quanto ha da offrire, dai un’occhiata al nostro cheat sheet che copre tutte le proprietà CSS3 essenziali.