Guida CSS interattiva: CSS inline

Q: Cos'è il CSS inline?

Il CSS inline è CSS scritto nell'attributo style di un elemento, come . Le dichiarazioni si applicano solo a quell'elemento, senza selettore.

Q: Quali sono i 3 modi di aggiungere CSS all'HTML?

Inline, con l'attributo style su un elemento; interno, con un elemento nella pagina; ed esterno, con un file .css separato collegato con nell' . Per un sito intero di solito si scelgono i file esterni.

Q: Si può usare hover nel CSS inline?

No. L'attributo style accetta solo dichiarazioni, quindi pseudo-classi come :hover, pseudo-elementi come ::before e regole @media non si possono scrivere lì. Mettili in un elemento o in un foglio di stile.

Cos'è il CSS inline

Il CSS inline è CSS scritto direttamente su un elemento HTML con l'attributo style. Il valore è un elenco di dichiarazioni, property: value;, che si applicano solo a quell'elemento.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

Non ci sono selettore né parentesi graffe: il bersaglio è l'elemento su cui si trova l'attributo. Separa le dichiarazioni con il punto e virgola. L'ultimo punto e virgola è facoltativo, ma tenerlo rende sicuro aggiungere la dichiarazione successiva.

Sintassi

<element style="property: value; property: value;">

Parte	Esempio	Note
Attributo	`style="..."`	Un attributo globale: ammesso su ogni elemento HTML
Dichiarazione	`color: #2563eb;`	Stessa sintassi di una regola in un foglio di stile
Più dichiarazioni	`padding: 8px; border: 1px solid #e5e7eb;`	Separate da `;`
Virgolette interne	`style="font-family: 'Courier New', monospace;"`	Usa gli apici singoli dentro l'attributo tra virgolette doppie

Tutto ciò che non è una dichiarazione non è ammesso. :hover, ::before, @media e i selettori non hanno posto in un attributo style.

I 3 modi di aggiungere CSS all'HTML

Il CSS arriva in una pagina in tre modi. Questa pagina tratta il primo; il CSS esterno e interno ha una pagina tutta sua.

Metodo	Dove sta il CSS	Ambito	Uso tipico
Inline	Attributo `style` su un elemento	Quell'elemento	Valori singoli, valori impostati da JavaScript
Interno	Elemento `<style>` nella pagina	Quella pagina	Demo di una sola pagina, template email, CSS critico
Esterno	Un file `.css`, collegato con `<link>`	Ogni pagina che lo collega	Dare stile a un sito intero

Lo stesso paragrafo con lo stile applicato in tutti e tre i modi (il file esterno è mostrato come commento, perché l'anteprima non ha un secondo file da caricare):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

Il terzo paragrafo mantiene il padding e il raggio della regola .note e sostituisce solo lo sfondo, perché lo stile inline imposta solo quella proprietà.

Perché gli stili inline vincono

Quando una regola del foglio di stile e uno stile inline impostano la stessa proprietà, vince lo stile inline. Non importa quanto sia specifico il selettore: anche un selettore ID perde.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

L'unica eccezione è !important. Una dichiarazione del foglio di stile marcata !important batte una dichiarazione inline normale, e un !important inline le batte entrambe. Ecco perché gli stili inline rendono un sito difficile da mantenere: per cambiarli da un foglio di stile ti serve !important, e parte l'escalation. La pagina su !important mostra l'ordine completo.

Quando il CSS inline è lo strumento giusto

Gli stili inline vanno bene quando il valore è un dato, non una scelta di design: cambia da elemento a elemento ed è scritto da un template o da JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

L'aspetto (colori, altezza, raggio) sta nel foglio di stile. Solo la larghezza, diversa per ogni barra, è inline. JavaScript scrive lo stesso attributo tramite element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

Dopo il clic, l'HTML del paragrafo diventa style="color: rgb(245, 158, 11); font-weight: bold;". In JavaScript i nomi di proprietà con il trattino diventano camelCase (font-weight diventa fontWeight).

Spesso la via di mezzo più pulita è una variabile CSS: imposta inline solo la variabile, style="--progress: 35%", e lascia che il foglio di stile la usi. Vedi le variabili CSS.

Dove il CSS inline non basta

Niente stati né pseudo-elementi. Non puoi scrivere :hover, :focus o ::before in un attributo style.
Niente media query. Una larghezza inline non può cambiare sul telefono.
Ripetizione. Dieci pulsanti con lo stesso stile inline significano dieci punti da modificare.
Difficile da sovrascrivere. Solo !important in un foglio di stile lo batte.
Content Security Policy. Una CSP rigida senza 'unsafe-inline' in style-src blocca gli attributi style scritti nell'HTML.

Errori comuni

Scrivere un selettore o delle graffe dentro style. style="p { color: red }" viene ignorato. Lì vanno solo dichiarazioni.
Usare = al posto di :. Si scrive color: red, non color=red.
Annidare virgolette doppie. style="font-family: "Arial"" chiude l'attributo troppo presto. Usa gli apici singoli all'interno.
Dimenticare le unità. style="width: 200" viene ignorato; scrivi 200px. Solo una lunghezza pari a 0 può fare a meno dell'unità.
Dare stile a un sito intero inline. Sposta gli stili ripetuti in una classe di un foglio di stile e tieni gli stili inline per i valori propri di ogni elemento.

Domande frequenti

Cos'è il CSS inline?

Il CSS inline è CSS scritto nell'attributo style di un elemento, come <p style="color: red;">. Le dichiarazioni si applicano solo a quell'elemento, senza selettore.

Quali sono i 3 modi di aggiungere CSS all'HTML?

Inline, con l'attributo style su un elemento; interno, con un elemento <style> nella pagina; ed esterno, con un file .css separato collegato con <link rel="stylesheet" href="styles.css"> nell'<head>. Per un sito intero di solito si scelgono i file esterni.

Il CSS inline sovrascrive il CSS esterno?

Sì, nella maggior parte dei casi. Una dichiarazione nell'attributo style batte qualsiasi selettore in un foglio di stile, qualunque sia la sua specificità. Un foglio di stile può vincere solo con !important, e un !important inline batte anche quello.

Il CSS inline è una cattiva pratica?

Per dare stile a un sito intero, sì: si ripete, non può usare :hover né le media query ed è difficile da sovrascrivere. Va bene per valori singoli impostati da JavaScript o da un template, come la larghezza di una barra di avanzamento o un colore scelto dall'utente.

Si può usare hover nel CSS inline?

No. L'attributo style accetta solo dichiarazioni, quindi pseudo-classi come :hover, pseudo-elementi come ::before e regole @media non si possono scrivere lì. Mettili in un elemento <style> o in un foglio di stile.

Concetti correlati