Questa pagina spiega perché i documenti utilizzano i CSS. Utilizzerai i CSS per aggiungere un foglio di stile (stylesheet) al tuo documento di esempio.
Informazioni: Perché usare i CSS?
I CSS aiutano a mantenere le informazioni sul contenuto di un documento separate dai dettagli su come presentarlo. Le informazioni sulla presentazione del documento sono note come stile. Mantenere lo stile separato dal contenuto permette di:
- Evitare duplicazioni
- Rendere la modifica e la manutenzione più semplice
- Applicare allo stesso contenuto stili diversi per diversi scopi
| 1) Il tuo sito web potrebbe avere migliaia di pagine che si assomigliano. Utilizzando i CSS si possono immagazzinare le informazioni sullo stile in dei file comuni che vengono condivisi da tutte le pagine.
2) E' possibile creare differenti stili in modo che quando l'utente visualizza una pagina web, il browser carichi determinate informazioni sullo stile insieme al contenuto della pagina. Quando invece l'utente stampa la pagina web, venga fornito uno stile diverso che renda la pagina stampata più semplice da leggere. |
In linea di massima il linguaggio di markup è utilizzato per descrivere le informazioni sul contenuto di un documento, non il suo stile. I CSS, al contrario, definiscono lo stile, non il contenuto. (Più avanti nella guida vedremo qualche eccezione.)
Un linguaggio di marcatura come HTML fornisce qualche sistema per specificare lo stile, ad esempio l'uso del tag <b> per segnare un testo in grassetto o la definizione del colore di sfondo della pagina all'interno del tag <body> (questo secondo esempio è fortemente deprecato).
Quando si utilizzano i CSS normalmente si evita di "sporcare" in questo modo il codice di markup, concentrando tutte le informazioni sullo stile in un solo posto, possibilmente separato. |
Azione: Creare un foglio di stile
Crea un altro file di testo vuoto nella stessa directory utilizzata prima. Questo file sarà il foglio di stile. Nominalo come: style1.css
Nel file CSS, copia e incolla questa singola stringa, poi salva il file:
strong {color: red;}
Collegare il foglio di stile al proprio documento
Per collegare il foglio di stile al tuo documento occorre modificare il file HTML. Aggiungi la linea segnalata in grassetto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample document</TITLE>
<LINK rel="stylesheet" type="text/css" href="style1.css">
</HEAD>
<BODY>
<P>
<STRONG>C</STRONG>ascading
<STRONG>S</STRONG>tyle
<STRONG>S</STRONG>heets
</P>
</BODY>
</HTML>
Salva il file e ricarica la finestra del browser. Il foglio di stile renderà ora le lettere iniziali in rosso, come segue:
| Cascading Style Sheets |
| Oltre al rosso ("red"), i CSS accettano altri nomi per indicare i colori (in inglese). Senza guardare una referenza, trova cinque o più nomi di colori che funzionino. |
Cos'altro?
Se hai avuto difficoltà a comprendere questa pagina, o sei hai dei commenti a proposito, utilizza questa pagina di Discussione.
Ora che hai un documento di esempio collegato ad un foglio di stile separato, sei pronto per saperne di più su come il browser li combina quando visualizza il documento: Come funzionano i CSS