Cos'è il CSS?
CSS sta per C ascading S tyle S fogli
CSS descrive come devono essere visualizzati gli elementi HTML
Esempio CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Fai clic sul pulsante "Provalo tu stesso" per vedere come funziona.
Sintassi CSS
Una regola CSS è composta da un selettore e un blocco di dichiarazione :
Il selettore punta all'elemento HTML per lo stile (h1).
Il blocco di dichiarazione (tra parentesi graffe) contiene una o più dichiarazioni separate da punto e virgola.
Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti.
Nell'esempio seguente tutti gli elementi <p> saranno allineati al centro, rossi e avranno una dimensione del carattere di 32 pixel:
Esempio
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Lo stesso esempio può anche essere scritto così:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Foglio di stile esterno
Un foglio di stile CSS può essere archiviato in un file esterno :
miostile.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
I fogli di stile esterni sono collegati a pagine HTML con tag <link> :
Esempio
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Stile in linea
Esempio
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Ordine a cascata
Se vengono specificati stili diversi per gli elementi HTML, gli stili si sovrapporranno a nuovi stili con la seguente priorità:
- Priorità 1: stili in linea
- Priorità 2: fogli di stile esterni e interni
- Priorità 3: impostazione predefinita del browser
- Se diversi stili sono definiti sullo stesso livello di priorità, l'ultimo ha la priorità più alta.
Esempio
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS Demo - Una pagina HTML - Stili multipli!
Qui mostreremo una pagina HTML visualizzata con 4 diversi fogli di stile.
Fare clic sui pulsanti Foglio di stile (1-4) anche per vedere la pagina visualizzata con stili diversi.
Tutorial CSS completo
Questa è stata una breve descrizione dei CSS.
Per un tutorial CSS completo vai a W3Schools CSS Tutorial .
Per un riferimento CSS completo, vai a Riferimento CSS di W3Schools .