Accueil >Web >Référence HTML – éléments et attributs >style – style en ligne (attribut)

style – style en ligne (attribut)

<element style="propriété: valeur;">

Des styles CSS directement dans l’élément (styles en ligne). Ils ont la priorité sur toutes les règles des fichiers et des blocs style – seule une règle avec !important peut les écraser. Ils ont du sens pour des valeurs générées par un programme (largeur d’un indicateur, couleur d’une étiquette tirée de la base de données) ou dans les e-mails.

Valeurs

  • Déclarations CSS séparées par des points-virgules, sans sélecteur ni accolades (color: red; margin: 0).
  • S’applique uniquement à cet élément (et, pour les propriétés héritées, à ses descendants) ; on ne peut y écrire ni @media, ni :hover, ni pseudo-éléments.
  • S’applique à : tous les éléments
  • En JavaScript : element.style

Exemples

La largeur d’un indicateur calculée par un programme – via une propriété personnalisée, pour que l’apparence reste dans le CSS :

<div class="indicator" style="--done: 65%">65 %</div>

.indicator {
  width: var(--done);
  padding: 2px 8px;
  background: #8bc34a;
  color: #fff;
}
Résultat
65 %

Points d’attention

  • Les styles en ligne sont difficiles à maintenir : changer l’apparence signifie parcourir tous les gabarits. Une apparence répétée relève des classes.
  • Une Content Security Policy avec style-src sans 'unsafe-inline' bloque aussi l’attribut style (mais pas les réglages via element.style dans un script).
  • element.style ne renvoie que les styles en ligne. getComputedStyle(element) renvoie le style final de l’élément.
  • N’insérez pas dans style de valeurs venant des visiteurs – le CSS peut réorganiser la page ou charger des URL de tiers.

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 1, Firefox 1, Safari 1. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
style – styles dans la page
class – classes (attribut)
data-* – données personnalisées (attribut)