I CSS (Cascading Style Sheets – Fogli di stile a cascata) sono dei semplici file di testo che “spiegano” al browser come mostrare ai visitatori testi, immagini e pulsanti di un intero sito con uno stile grafico uniforme e ben definito.
Per comprendere al meglio l’utilizzo dei CSS e la loro semplicità, conviene partire da esempi pratici.
Su questo sito (yepa.com se non te ne sei accorto ;=P) puoi notare che passando su un link con il mouse, questo cambia colore da blu a rosso. Questo effetto è ottenuto con due semplici linee in un file di testo (puoi scaricarlo da qui: http://yepa.com/yps/themes/Yepa/style/style.css).
Vediamone il contenuto:
a {text-decoration: none}
a:hover {color: #ff0000 ; text-decoration: none}
nella prima linea dico che il tag <a> (quello per fare i link) non deve avere nessuna decorazione (text-decoration: none) mentre nella seconda linea dichiaro che se si va sopra (hover) il tag <a> (quello per i link) con il mouse, il colore deve diventare rosso (color: #ff0000) e la decorazione del testo deve rimanere nulla (text-decoration: none).
Semplice vero?
Ok, ho preparato questo file di testo ma ora come dico al browser che deve utilizzare il nuovo stile nell’interpretare la pagina?
Niente di più facile, esiste un tag HTML apposito da inserire tra gli <head></head> della pagina in questione. Il tag è:
<link REL=”StyleSheet” HREF=”themes/Yepa/style/style.css” TYPE=”text/css”>
Naturalmente dopo HREF ci va il percorso del vostro file CSS.
Vediamo la lista di alcuni degli attributi CSS utilizzati più di frequente:
- color: specifica il colore da usare
- text-decoration: serve per decorazioni del testo, come marcatura, sottolineatura o corsivo
- background: definisce il colore dello sfondo es.: {background: red} -> setta il colore di sfondo, di un testo, un’immagine o tutta la pagina come rosso
- font: definisce il tipo di carattere (font) da utilizzare es.: {font: Arial} -> setta il font Arial
Con questi quattro attributi già puoi rivitalizzare un po’ le tue pagine…