Le regole del CSS
La chiave per capire come il CSS funziona è immaginare ogni elemento HTML in un box invisibile.
Il CSS ci permette di modificare il modo di presentare ogni box e il suo contenuto tramite delle regole.
Usando il CSS, possiamo aggiungere bordi intorno ad ogni elemento (box), specificarne lo spazio o il colore di background o del bordo. Possiamo, inoltre, controllare il font e la grandezza dei caratteri dentro il box e molto altro ancora.
Ricordiamoci, poi, il comportamento degli elementi che si distinguono in elementi a blocchi, cioè che iniziano su una nuova linea (es. <h1>…<h6>, <p>, <div>, …) e gli elementi in linea (es, <b>, <i>, <img>, <em>, <span>, …) che seguono il flusso di scrittura.
Di seguito vediamo un esempio di pagina con i bordi dei box evidenziati di rosso per gli elementi a blocchi e di blu per gli elementi in linea (ho aggiunto più spazio tra il bordo e il testo che vedremo in dettaglio in un prossimo articolo):
primo paragrafo che contiene un commento in corsivo
secondo paragrafo che contiene un commento in grassetto
Come creare le regole di stile
CSS lavora associando regole agli elementi. Queste regole dicono al browser come il contenuto dovrebbe essere visualizzato.
Per creare una regola dobbiamo associare due parti: un selettore (gruppo di elementi) e una dichiarazione.
p {
font-family: Arial;
}
h1, h2, h3 {
font-family: Verdana;
color:yellow;
}
Queste regole indicano al browser che tutti i caratteri contenuti negli elementi p (paragrafo) dovrebbero essere visualizzati utilizzando il carattere Arial e gli elementi h1, h2, h3, oltre al font Verdana vorremmo che i caratteri fossero di colore giallo.
La regola inizia con i selettori divisi da virgole e la dichiarazione, cioè i comportamenti che vorremmo ottenere a destra racchiusi tra parentesi graffe { } e separati tra di loro da punti e virgole ;.
Le dichiarazioni si compongono di due parti: una proprietà e uno o più valori e sono separati da due punto :.
Quindi ai selettori verrà applicato lo stile racchiuso tra le parentesi quadre.
Qui di seguito le regole generali utilizzate nell’esempio visto più in alto.
Se volessimo che tutti gli elementi div, p, i e b abbiano questo comportamento possiamo configurare lo stile CSS in questo modo:
div, p {
border: 1px solid red;
padding: 15px;
}
i, b {
border: 1px solid blue;
padding: 5px;
}Ovviamente non può essere questo il caso, altrimenti avremo tutta la pagina completamente evidenziata da bordi rossi e blu.
Spiegheremo meglio ed entreremo maggiormente nel dettaglio nei prossimi articoli.
CSS continua …
