Insieme all’HTML, il CSS (Cascading Style Sheets), è il linguaggio informatico più importante per i web designer che desiderano disegnare manualmente dei siti web aggiornati e competitivi.
Il CSS è quindi il linguaggio informato usato per formattare documenti XML, HTML e XHTML di pagine web e siti; è usato per separare i contenuti della pagina dal proprio layout o dalla formattazione e consentire una programmazione più intuitiva e semplice sia agli stessi autori, sia agli utenti, permettendo al contempo un riutilizzo di codice e una sua più agevole manutenzione.
Il CSS, esattamente come l’HTML, è scritto sotto forma di testo direttamente su documento HTML, ovvero inline per ciascuno, oppure solamente una volta per tutti i documenti, sfruttando il tag dell’HTML.
Per progettare i siti web, tuttavia, i web designer di solito preferiscono integrare i documenti CSS in modo separato, ottenendo un codice sorgente chiaro, privo di istruzioni di progettazione, grazie ai rinvii a fogli di stile divisi. Il codice sorgente risulta più semplice se ci sono poche ripetizioni, fattore determinante nel caso di download, che diventano più rapidi e brevi quando si desidera visualizzare il sito web.
Il CSS, inoltre, alleggerisce la manutenzione del sito stesso lavorando direttamente sui file CSS, se dovesse ritenersi necessario adattare il design e consente di analizzare e trasformare ogni documento HTML.
Come scrivere un CSS?
Per scrivere un CSS occorre seguire 3 differenti regole di stile per gestire correttamente il codice, ovvero:
– Inline: dentro il tag HTML usando lo style=””;
– Internal: in cui le regole di stile sono incluse nello che è, a sua volta, contenuto nell’head della pagina HTML;
– External: riguarda tutte le regole CSS presenti in un documento .css esterno, diviso dall’.html.
Non è certamente possibile sintetizzare in poche righe un argomento complesso come il CSS, tuttavia, per iniziare a comprendere come funziona il linguaggio, possiamo affermare che la struttura base segue lo schema:
selettore { dichiarazione }.
Il selettore è una rappresentazione dell’HTML a cui si riferisce la regola e si tratta di una combinazione tra proprietà e valore, immessa tra le due parentesi graffe, ognuna delle quali termina con punto e virgola:
elemento HTML { proprietà: valore; }
Per fare un esempio, in base al suddetto schema si può applicare uno specifico colore al titolo:
h2 { color: red; }
L’h2 indica il titolo 2, ovvero il sottotitolo, mentre nella dichiarazione viene inclusa la proprietà color e il valore, in questo caso red: tale regola fa si che tutte le parti di testo dell’
vengano scritte in rosso.
Esempio di codice CSS per formattare i paragrafi e stabilire il colore
Il linguaggio CSS consente di non specificare lo stile ogni volta che creiamo un singolo elemento,infatti, basta dire che tutti i paragrafi dovrebbero avere quello stile: ad esempio, se desideriamo che ogni paragrafo
sia più grande e non nero ma grigio, il codice sarà:
p { font-size: 120%; color: dimgray; }
Così facendo, il testo erediterà automaticamente la dimensione 120% e il colore “dimgray”.
Inoltre, si possono anche stabilire impostazioni di colore specifiche usando codici esadecimali come:
h2 { color: #ff0000; }
Si possono usare singoli selettori, oppure interi blocchi di dichiarazioni con regole dettagliate:
- selettore {
- proprietà1: valore;
- proprietà2: valore;
- proprietà3: valore;
- proprietà4: valore;
- }
Chi è alle prime armi, tuttavia, è sufficiente che impari a usare i selettori di classe, ideologia, ID e universali, ad esempio, il selettore h2 con la dichiarazione:
h2 {
color: #305796;
font-family: Helvetica, sans-serif;
}
Quali sono i tre tipi di CSS?
I tre tipi di CSS sono esterni, interni e in linea:
- gli stili esterni dei CSS monitorano l’aspetto degli oggetti che si trovano su varie pagine del sito;
- gli stili interni controllano l’aspetto di ogni pagina;
- gli stili in linea servono per controllare un solo elemento di una pagina o una singola parola.
È possibile adoperare fogli di stile multipli che già sanno come rinviare l’uno all’altro: quelli in linea precedono i fogli interni e questi hanno la precedenza sugli esterni.
Creare un foglio di stile e la scrittura dei comandi di CSS è possibile usando l’editor di testo: affinché le regole siano applicate e vengano rispettate dalla pagina web, occorre collegare il foglio di stile all’HTML.
Cosa si può fare con il CSS?
I CSS sono utili per gestire l’intero layout presente in un sito web, consentono di operare sulla formattazione del testo, di posizionare gli elementi grafici e la loro relativa disposizione in base ai differenti dispositivi.
Il CSS permette di specificare elementi grafici come dimensione, font, colore, bordo, spaziatura e ben posizionare gli elementi in un sito web: insieme ai linguaggi JavaScript e HTML, il CSS è uno dei pilastri della programmazione front end. Infine, è utile per regolare il contenuto e l’aspetto visivo di una pagina web.