Utilizzo del CSS
Tre modi per aggiungere stili a un documento HTML: inline, interno ed esterno. Scopri quando e come usarli.
Il CSS controlla l'aspetto di un documento HTML, ma il browser deve sapere dove trovare le regole di stile. Esistono tre modi per collegare il CSS a una pagina HTML, e ciascuno è adatto a situazioni diverse:
- Stile inline — le regole vengono inserite direttamente su un singolo elemento tramite il suo attributo
style. - Stile interno (incorporato) — le regole vengono raccolte all'interno di un elemento
<style>nella sezione<head>della pagina. - Stile esterno — le regole vengono mantenute in un file
.cssseparato e collegate alla pagina.
Questa pagina illustra tutti e tre i metodi, quando utilizzarli e come interagiscono quando più di uno di essi punta allo stesso elemento. Se sei nuovo al modo in cui viene costruita una regola CSS (selettore, proprietà, valore), leggi prima Sintassi CSS.
Stile Inline
Uno stile inline viene scritto direttamente su un elemento tramite il suo attributo style. Le regole si applicano solo a quell'unico elemento. L'attributo contiene una o più dichiarazioni (proprietà: valore) separate da punto e virgola — non sono necessari né selettore né parentesi graffe, poiché l'elemento a cui si applica la regola è l'elemento su cui è scritta.
Quando usarlo: per modifiche rapide e isolate o per stili generati dinamicamente (ad esempio da JavaScript). Evitalo per lo stile generale — poiché la regola risiede sull'elemento, non è riutilizzabile ed è difficile da mantenere in una pagina di grandi dimensioni.
Esempio di creazione di uno stile inline per un documento HTML:
Esempio di Stile CSS Inline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Risultato
Analizziamo l'esempio. Sul tag <h2> abbiamo scritto style="color:#1c87c9", quindi il testo di quell'intestazione viene visualizzato nel colore blu #1c87c9.
Abbiamo fatto lo stesso sul tag <p> con style="color:#8ebf42; font-size:15px". Le due dichiarazioni sono separate da un punto e virgola: il testo tra i tag di apertura <p> e di chiusura </p> è colorato in #8ebf42 (verde) e ha dimensione 15px.
Stile Interno
Con uno stile interno (o incorporato), il CSS per una pagina risiede all'interno di un elemento <style> nell'<head> della pagina. A differenza degli stili inline, qui si scrivono regole complete — un selettore seguito da un blocco di dichiarazione tra parentesi graffe — quindi una sola regola può puntare a molti elementi contemporaneamente.
Quando usarlo: per una singola pagina che necessita di uno stile proprio e non è condivisa con il resto del sito, o per la prototipazione rapida. Il compromesso è che le regole influenzano solo quella pagina. Per applicare lo stesso stile a più pagine bisognerebbe copiare il blocco <style> in ciascuna di esse — ed è esattamente il problema che i fogli di stile esterni risolvono.
Nell'esempio seguente, la regola body colora lo sfondo della pagina in #1c87c9 (blu) e la regola p rende bianco il testo dei paragrafi.
Esempio di creazione di uno stile interno per un documento HTML:
Esempio di Stile CSS Interno
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Stile Esterno
Un foglio di stile esterno mantiene tutto il CSS nel proprio file, separato dall'HTML. Questo è l'approccio standard per i siti web reali, perché ogni pagina può collegarsi allo stesso file e condividere un aspetto coerente. Puoi creare il file con qualsiasi editor di testo o editor HTML come Notepad o Sublime Text.
Il file contiene solo CSS — nessun tag HTML — e viene salvato con estensione .css. Per collegarlo a una pagina, aggiungi un tag <link> all'interno della sezione <head>. Ogni pagina che deve utilizzare quegli stili ha bisogno del proprio <link>.
Quando usarlo: quasi sempre per un sito multi-pagina. Poiché le regole risiedono in un unico posto, modificare un colore o un font in quel singolo file .css aggiorna immediatamente tutte le pagine, e il browser può mettere in cache il file così da scaricarlo una sola volta.
Esempio di creazione di uno stile esterno per un documento HTML:
Esempio di Stile CSS Esterno
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Un file style.css corrispondente potrebbe apparire così:
body {
background-color: #1c87c9;
}
p {
color: white;
}Quale Metodo Usare?
Come regola generale:
- Usa un foglio di stile esterno per quasi tutto il lavoro reale — è riutilizzabile, memorizzabile nella cache e facile da mantenere.
- Usa gli stili interni per una pagina isolata o una demo rapida.
- Usa gli stili inline solo per una singola modifica che non riesci a esprimere in altro modo (spesso un valore calcolato dinamicamente).
Come Interagiscono i Metodi
Quando lo stesso elemento è puntato da più di un metodo, il browser deve decidere quale dichiarazione prevale. A parità di condizioni, l'ordine di priorità è:
- Stili inline (priorità più alta).
- Regole interne ed esterne, decise dalla specificità del selettore e, in caso di parità, da quale regola appare per ultima.
Quindi un inline style="color:red" sovrascrive una regola p { color: blue; } proveniente da un foglio di stile. Questo sistema di priorità è chiamato cascade — la "C" in CSS.