Tag HTML <style>
Il tag <style> definisce la formattazione degli elementi di una pagina web. Descrizione, sintassi, attributi ed esempi.
Il tag <style> incorpora regole CSS direttamente all'interno di un documento HTML. Definisce come gli elementi di quella pagina devono essere visualizzati, senza la necessità di un file stylesheet separato. Questo viene spesso definito CSS interno (o incorporato).
Per caricare CSS da un file separato, utilizza l'elemento <link rel="stylesheet">.
Una pagina può contenere più di un elemento <style>, e le regole di tutti vengono combinate.
Perché <style> appartiene al <head>
Il CSS all'interno di un tag <style> è destinato al browser, non al lettore, quindi viene inserito nell'elemento <head>. Ci sono buone ragioni per mantenerlo lì:
- Blocca il rendering. Il browser deve leggere e applicare il CSS prima di poter disegnare la pagina. Inserire gli stili nel
<head>consente al browser di conoscere l'aspetto di tutto prima di disegnare il corpo. - Evita il FOUC (Flash Of Unstyled Content). Se gli stili sono definiti in fondo al documento, il browser potrebbe mostrare brevemente contenuto non stilizzato e poi ri-stilizzarlo, causando un visibile sfarfallio e uno spostamento del layout.
HTML5 tecnicamente consente un elemento <style> all'interno del <body> (un browser applicherà comunque le regole), ma è sconsigliato: può causare un re-flow e il FOUC descritto sopra. Mantieni gli stili nel <head>.
Nelle versioni precedenti di HTML e in XHTML, l'attributo type="text/css" era obbligatorio con il tag <style>. In HTML5 è il valore predefinito e può essere omesso.
Tre modi per applicare CSS
Il tag <style> è solo uno dei tre modi per applicare CSS. Scegliere quello giusto è importante:
| Metodo | Come | Indicato per |
|---|---|---|
Attributo style inline | <p style="color: red;"> | Un'unica sostituzione su un singolo elemento. Difficile da mantenere e ha la specificità più alta, quindi usarlo con parsimonia. |
<style> interno | Un blocco <style> nel <head> | Stili necessari solo per una pagina, oppure CSS critici da inserire inline per evitare una richiesta aggiuntiva. |
<link rel="stylesheet"> esterno | Un file .css separato | Stili condivisi tra molte pagine. Memorizzato nella cache dal browser e mantiene il contenuto separato dalla presentazione — la scelta usuale per i siti reali. |
Vedi HTML Styles per un confronto più completo.
Sintassi
Il tag <style> si usa in coppia. Il contenuto viene scritto tra il tag di apertura (<style>) e il tag di chiusura (</style>).
Esempio del tag HTML <style>:
Tag HTML <style>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #1c87c9;
}
p {
color: #8ebf42;
}
</style>
</head>
<body>
<h1>Text heading.</h1>
<p>First paragraph.</p>
</body>
</html>I selettori (h1, p) all'interno del blocco puntano agli elementi nel corpo, e le dichiarazioni tra le parentesi graffe impostano i loro stili.
Risultato
Applicare gli stili in modo condizionale con media
L'attributo media permette a un blocco <style> di applicarsi solo quando la sua media query corrisponde — ad esempio solo su schermi piccoli, solo su schermi (non in stampa), oppure solo in stampa. Le regole in un blocco la cui query non corrisponde vengono ignorate.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Always applies -->
<style>
p {
color: #1c87c9;
}
</style>
<!-- Applies only on screens up to 600px wide -->
<style media="screen and (max-width: 600px)">
p {
color: #8ebf42;
font-size: 20px;
}
</style>
</head>
<body>
<p>Resize the window: this text turns green and grows on narrow screens.</p>
</body>
</html>Puoi fare la stessa cosa sull'elemento <link> (<link rel="stylesheet" media="..." href="...">).
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| media | media_query | Specifica il media per cui si applicano gli stili, ad esempio screen and (max-width: 600px). Se omesso, gli stili si applicano a tutti i media. |
| type | text/css | Specifica il tipo MIME del foglio di stile. Facoltativo in HTML5, poiché text/css è il valore predefinito. |
L'attributo obsoleto scoped
Potresti ancora trovare riferimenti all'attributo scoped, che avrebbe dovuto limitare le regole di un blocco <style> all'elemento padre e ai suoi discendenti. Non è mai stato ampiamente implementato ed è stato rimosso dallo standard HTML — non usarlo. Per applicare CSS con scope oggi, utilizza invece uno di questi approcci moderni:
- Shadow DOM (tramite elementi personalizzati / web components), dove gli stili sono completamente incapsulati e non fuoriescono.
- Nomi di classe con scope — un prefisso di classe univoco per componente, applicato manualmente o generato da strumenti come CSS Modules.