Styles HTML

Vous savez déjà construire la structure d’une page et pointer vers d’autres fichiers avec des chemins. La question suivante des débutants est comment changer l’apparence du contenu : couleur du texte, arrière-plan et taille. Dans les premiers exercices HTML, vous pouvez le faire avec l’attribut style. C’est une petite porte vers les idées CSS — utile pour les démos — tandis que le design complet du site passera plus tard vers un vrai CSS dans votre parcours d’apprentissage.

Qu’est-ce que l’attribut style ?

L’attribut style vous permet d’attacher des déclarations CSS directement à la balise d’ouverture d’un élément HTML. Le navigateur lit ces déclarations et peint cet élément en conséquence. Vous n’inventez pas un second langage depuis zéro : vous écrivez de courtes règles CSS à un endroit que HTML fournit déjà. C’est pourquoi le style en ligne est un bon outil pédagogique, même si les projets professionnels gardent rarement tout le design dans des attributs.

Réponse directe

Ajoutez l’apparence avec style="property: value;" sur un élément. Les propriétés de départ incluent color (premier plan du texte), background-color (la zone derrière le contenu) et font-size (taille du texte). Mettez toute la liste entre guillemets. Séparez plusieurs déclarations par des points-virgules. Pour de vrais sites multipages, préférez un fichier CSS ou un bloc <style> afin de ne pas répéter le même look sur chaque balise — mais pour cette leçon, concentrez-vous sur la lecture et l’écriture de déclarations en ligne claires.

Propriété et valeur, une à la fois

Chaque déclaration a une propriété (ce que vous voulez changer) et une valeur (comment cela doit paraître). Deux-points se placent entre elles. Les débutants devraient bien maîtriser quelques propriétés avant de mémoriser une liste énorme.

Lire l’exemple

• color: blue change seulement la couleur du texte de ce paragraphe
• background-color: lightyellow colore l’arrière-plan derrière le texte
• font-size: 24px fixe la taille du texte ; px est une unité courante pour débutants
• Chaque paragraphe a son propre style="..." pour que les trois effets restent séparés et faciles à voir
• Les couleurs nommées comme blue conviennent à la pratique ; plus tard vous verrez aussi des valeurs hex comme #336699
  Si rien ne change dans le navigateur, vérifiez que vous avez enregistré le fichier, actualisé la page, et gardé les guillemets autour de toute la valeur style.

Plusieurs déclarations dans un attribut

Vous pouvez combiner des déclarations dans un seul attribut style. Gardez la liste courte pour que le HTML reste lisible. Terminez chaque déclaration par un point-virgule — y compris un final, c’est correct et souvent plus clair lors d’une édition ultérieure.

Pourquoi ce modèle compte

• Un élément peut porter couleur, arrière-plan et taille ensemble
• Les points-virgules séparent les déclarations pour que le navigateur puisse analyser chaque paire
• #f0f0f0 est une couleur hex ; optionnelle pour débutants mais courante en CSS réel
• La phrase visible dans le paragraphe est du texte HTML normal ; seul l’attribut style change l’apparence
  Évitez d’entasser dix décisions de design dans un attribut le premier jour. Apprenez d’abord la syntaxe avec deux ou trois propriétés claires.

Style sur différents éléments

L’attribut style n’est pas limité à p. Titres, spans et bien d’autres éléments peuvent l’utiliser de la même façon. Cela aide à voir que le style suit l’élément auquel vous l’attachez — pas un interrupteur magique global.

À remarquer

• La couleur du h1 ne restyle pas automatiquement les paragraphes
• Le second paragraphe combine arrière-plan et taille de police
• Le style en ligne est local : il affecte cet élément (et, selon les règles CSS normales, peut influencer les enfants — mais gardez les démos simples pour l’instant)

Style en ligne maintenant, CSS plus tard

Le style en ligne est rapide pour les expériences. Il devient pénible quand vingt pages ont besoin de la même couleur de titre bleu marine et que vous devez éditer vingt attributs. Le CSS partagé — un bloc <style> dans l’en-tête du document, ou un fichier .css externe — garde l’apparence en un seul endroit. Ce cours inclut un apprentissage CSS dédié plus loin. Pour cette session HTML, votre travail est de comprendre l’idée property:value et d’écrire quelques exemples en ligne corrects sans traiter le style en ligne comme l’architecture finale de tout un site.

Exercice dans votre éditeur

1. Créez une page avec un h1 et trois courts paragraphes.
2. Donnez au premier paragraphe une color de texte.
3. Donnez au deuxième un background-color.
4. Donnez au troisième une combinaison de color et font-size.
5. Optionnellement, colorez le h1 avec son propre style.
6. Enregistrez et actualisez. Confirmez que chaque bloc a l’air différent.
7. Cassez volontairement un exemple (retirez un guillemet ou un px), actualisez, voyez l’échec, puis corrigez.
   Travailler un style en échec enseigne guillemets et unités plus vite que de seulement copier des échantillons parfaits.

Erreurs qui cachent vos styles

• Oublier les guillemets autour de la valeur : style=color:red est invalide en écriture normale d’attribut HTML
• Confondre color (texte) avec background-color (derrière le texte) et penser que « la couleur n’a rien fait »
• Omettre les unités là où la taille en a besoin (font-size: 24 au lieu de 24px dans beaucoup de cas débutants)
• Un traitement de texte qui remplace les guillemets droits par des guillemets typographiques dans les attributs
• Entasser le design d’une page entière en styles en ligne au lieu d’apprendre le CSS partagé ensuite
• Modifier le fichier mais oublier d’enregistrer avant l’actualisation — le navigateur montre encore l’ancienne version

Résumé

• L’attribut style ajoute des déclarations CSS à un élément HTML
• Écrivez property: value; et gardez toute la liste entre guillemets
• Propriétés de départ : color, background-color, font-size
• Combinez quelques déclarations avec des points-virgules ; gardez les démos courtes et lisibles
• Le style en ligne est excellent pour apprendre et de petites expériences, pas pour maintenir le design d’un site entier
• Le CSS partagé vient ensuite sur le parcours d’apprentissage quand vous voulez un seul endroit pour contrôler l’apparence
• Vérifiez toujours avec enregistrement + actualisation, et contrôlez guillemets et unités quand les styles « échouent mystérieusement »