In questo post voglio fare un introduzione ai CSS (Cascading Style Sheets) detti anche più semplicemente “fogli di stile”.
Ma cosa sono e a cosa servono i fogli di stile CSS?
I fogli di stile CSS sono dei semplici files di testo ma con estensione .css e l’utilità principale di questi particolari files è quella che ci permettono di separare l’aspetto puramente dell’aspetto grafico di un sito web dalla parte del codice di sviluppo del sito.
Nei files CSS vengono definite delle proprietà che verranno poi richiamate dalle pagine del sito web e applicate ai tags html, in modo da assegnargli lo “stile della grafica” che abbiamo appunto definito nel file .css come ad esempio il colore di sfondo di una pagina, colore e tipo di font di un testo, i bordi e spessori di una immagine o di una tabella, margini, interlinea di un testo, etc…
In realtà il codice CSS può essere scritto anche direttamente dentro ogni singola pagina html, ma il vantaggio dei CSS è proprio quello di separare la parte dell’aspetto della “grafica” del sito da quella del codice, quindi il mio consiglio è quello di scrivere le proprietà CSS in un file dedicato, con estensione .css appunto, da richiamare o importare poi nelle pagine del sito.
Ad esempio:
Creiamo un nuovo file chiamandolo style.css ed all’interno andiamo a scrivere:
body{
background-color:#ff0000;
}
.testo{
font-family:Arial,Helvetica,san-serif;
font-size:14px;
font-weight:bold;
color:#ffff00;
}
A questo punto creiamo un nuovo file html chiamandolo prova_stile.html e salviamolo nella stessa directory (cartella) del file style.css creato in precedenza:
<html>
<head>
<title>Prova foglio di stile css</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="testo">Prova testo con foglio di stile css</p>
</body>
</html>
Come possiamo vedere aprendo la pagina prova_stile.html con un browser, il risultato dell’aspetto grafico della pagina è proprio quello che abbiamo definito del file .css quindi le proprietà inserite nel file .css vengono applicate ai tags html dove sono correttamente richiamate.
Spero che questa introduzione sia servita per incuriosirvi e iniziare ad approfondire il discorso CSS Cascading Style Sheets con i futuri post che tratteremo su questo argomento.
Intanto vi consiglio un bel libro sui fogli di stile che potete trovare su Amazon.it
Klaudio973
