style

Description

L’attribut style contient des déclarations CSS appliquées uniquement à l’élément en question. Sa spécificité est supérieure à toute règle CSS externe ou dans une balise <style>, ce qui le rend difficile à surcharger. Il est principalement utile pour appliquer des styles dynamiques via JavaScript ou pour des cas uniques qui ne justifient pas une règle CSS dédiée.

Syntaxe

<p style="color: red; font-weight: bold;">Texte rouge en gras</p>
<div style="--couleur-theme: #336699; padding: 1rem;">…</div>

Exemples

Style dynamique via JavaScript :

<div id="barre-progression" style="width: 0%; height: 8px; background: #36c;">
</div>

<script>
  function mettreAJour(pourcentage) {
    document.getElementById('barre-progression').style.width = pourcentage + '%';
  }
  mettreAJour(65);
</script>

Variables CSS custom properties inline :

<!-- Passage d'une valeur dynamique via variable CSS -->
<div class="thermometre" style="--valeur: 72%">
  <div class="mercure"></div>
</div>

<style>
  .thermometre { height: 200px; }
  .mercure { height: var(--valeur); background: red; }
</style>

Notes

Spécificité élevée : les styles inline ont une spécificité de (1,0,0,0), supérieure à toute sélecteur CSS (sauf !important). Cela les rend difficiles à surcharger et peut compliquer la maintenance.

Variables CSS — cas d’usage légitime : utiliser style pour passer des valeurs dynamiques via des custom properties CSS (--ma-variable) est un pattern moderne valide — la logique reste dans CSS, seule la valeur change inline.

Bonne pratique : pour les styles statiques, toujours préférer des classes CSS. L’attribut style est justifié pour les styles calculés dynamiquement (positions, dimensions, couleurs issues de données).