Come abbiamo visto, attraverso l'attributo "style" possiamo personalizzare lo stile di un contenitore. Ma se dovessimo cambiare allo stesso modo lo stile di cento paragrafi anziché di uno soltanto? È chiaro che sarebbe molto lungo e dispendioso personalizzare l'attributo "style" per tutti i contenitori.
Per risolvere questo problema, i programmatori hanno quindi creato un sistema più rapido ed efficace per personalizzare lo stile delle pagine html: hanno creato i CSS, acronimo di "Cascade Style Sheets", che in italiano è traducibile con "Fogli di stile a cascata".
Quali vantaggi dà l'uso del CSS nel personalizzare lo stile delle pagine? È presto detto: permette di attribuire una solta volta lo stile ad un numero teoricamente illimitato di tag.
Come è possibile fare questa operazione? È sufficiente aggiungere al file html della pagina internet una parte che riguarda il css, seguendo alcune regole di scrittura precise.
Considera ad esempio questa pagina html; come puoi vedere, anche prima di visualizzare la pagina, potrai notare:
1) La presenza del tag <style> all'interno del tag <head> della pagina; le parentesi quadre con i puntini evidenziate in rosso indicano che proprio all'interno di questo tag andremo ad inserire tutte le informazioni che riguardano lo stile della pagina;
2) La presenza di un tag <h1>;
3) La presenza di cinque tag <div>; l'ultimo di questi ha l'attributo "classe" settato su "grande";
4) La presenza di tre paragrafi di testo: i primi due hanno l'attributo class con il nome "colore", il terzo con il nome "grande".
Poniamo il caso di voler scrivere (1) il titolo in colore rosso, (2) i testi contenuti nei div in colore blu, (3) il testo contenuto nei paragrafi con classe "colore" di arancione e (4) il testo con classe "grande" con un carattere più grande rispetto ai precedenti: come fare?
Seguendo quanto abbiamo già spiegato in questa pagina, potremmo scrivere tutte le informazioni che servono usando l'attributo style="..." di ciascun tag. Tuttavia questo sistema è piuttosto lungo e complesso, poiché ci obbliga a riscrivere per ben nove volte l'attributo e le sue proprietà.
La seconda alternativa è quella di scrivere delle regole css all'interno del tag <style> presente nell'<head> del file html: questa sarà la soluzione più breve ed economica!
Vediamo come si fa! Ecco come dovremo scrivere la regola css, in modo che il browser legga correttamente le istruzioni e dia lo stile desiderato alla pagina:
1) All'interno del <style> indichiamo innanzitutto il selettore, e cioè uno o più tag a cui vogliamo che sia modificato lo stile;
2) Dopo aver indicato il selettore, apriamo le parentesi graffe, che conterranno la nostra dichiarazione, e cioè tutte e proprietà che andremo a modificare con i rispettivi valori. Come avrai notato, le proprietà e i valori attribuiti a ciascuna sono in lingua inglese: quindi, seguendo questo corso, avrai occasione di imparare anche qualche parola nuova!
| REGOLA CSS | ||
| SELETTORE | DICHIARAZIONE | |
| Proprietà | Valore | |
| h1 | {color: | red;} |
| div | {color: | blue;} |
| .colore | {color: | orange;} |
| .grande | {font-size: | 24px;} |
Trascriviamo all'interno del tag <style> dell'<head> le quattro righe appena scritte con la sintassi corretta, come nell'esempio qui sotto.
Scrivi un commento