HTML 5 - 4.1: Comment appliquer les styles de bases
L'application de styles de base en HTML se fait principalement via l'attribut style directement sur les éléments. Cet attribut accepte des propriétés CSS permettant de modifier l'apparence immédiatement. Les propriétés les plus courantes incluent color pour la couleur du texte, background-color pour la couleur de fond, et margin pour les marges externes. Par exemple, ajouter style="color: green;" à un titre le rendra vert, tandis que style="background-color: yellow;" ajoutera un fond jaune à un élément.
On peut combiner plusieurs propriétés dans un seul attribut style sans répéter la balise. Ainsi, style="color: green; background-color: yellow; margin: 10px;" applique à la fois une couleur de texte, une couleur de fond et une marge. Cette approche est pratique pour les styles simples et ponctuels, bien qu'elle reste limitée en termes d'organisation pour de grandes feuilles de style.
Cette technique inline est idéale pour tester rapidement des styles ou appliquer des modifications spécifiques à des éléments individuels. Cependant, pour les projets plus importants, on préfère utiliser une balise <style> dans la section <head> ou une feuille de style externe pour mieux organiser et maintenir le code CSS.
En résumé
Cette leçon HTML5 montre comment appliquer des styles de base directement dans les balises HTML à l'aide de l'attribut style. Vous apprendrez à modifier la couleur du texte avec color, à ajouter un arrière-plan avec background-color, et à appliquer une marge avec margin. Plusieurs propriétés CSS peuvent être combinées dans un seul attribut style pour styler rapidement vos éléments sans recourir à une feuille de styles externe.
Points clés
- Utiliser l'attribut style directement sur les balises HTML pour ajouter des styles inline
- La propriété color change la couleur du texte d'un élément
- La propriété background-color applique une couleur d'arrière-plan à un élément
- Plusieurs propriétés CSS peuvent être combinées dans un seul attribut style en les séparant par des points-virgules
- La propriété margin ajoute de l'espace (en pixels ou autres unités) autour d'un élément
Questions fréquentes
Comment changer la couleur du texte en HTML5 ?
Utilisez l'attribut style avec la propriété color, par exemple : <h1 style="color: green;">Mon titre</h1> pour mettre le titre en vert.
Peut-on ajouter plusieurs propriétés CSS dans un seul attribut style ?
Oui, vous pouvez ajouter plusieurs propriétés en les séparant par des points-virgules, comme : style="color: green; background-color: yellow; margin: 10px;"
Quelle est la différence entre color et background-color ?
La propriété color change la couleur du texte, tandis que background-color change la couleur de l'arrière-plan de l'élément.