CSS en ligne
Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 6 sur 76.
Le CSS en ligne est une méthode permettant d'ajouter des styles CSS directement à un élément HTML en utilisant l'attribut style. Cette approche vous permet d'appliquer des styles uniques à des éléments individuels sans avoir besoin de feuilles de style externes ou internes. Les styles en ligne sont utiles pour effectuer des changements de style rapides et spécifiques à un seul élément.
Voici la syntaxe de base pour utiliser le CSS en ligne :
<element style="property: value;"></element><element>: L'élément HTML que vous souhaitez styliser.style: Un attribut qui contient les déclarations CSS.
property: La propriété CSS que vous souhaitez définir (par exemple, color, font-size).value: La valeur que vous souhaitez définir pour la propriété (par exemple, blue, 16px).
Par exemple :
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>Dans cet exemple, l'élément de paragraphe possède des styles en ligne qui définissent la couleur du texte sur bleu et la taille de la police sur 16 pixels. Ces styles ne s'appliqueront qu'à cet élément de paragraphe spécifique.
Défi
FacileOn vous donne un document HTML avec un élément de paragraphe. Utilisez du CSS en ligne pour styliser le paragraphe avec les propriétés suivantes :
- Définissez la couleur du texte sur red.
- Définissez la taille de la police sur 18 pixels.
Consultez l'exemple dans la leçon pour vous orienter !
Aide-mémoire
Utilisez l'attribut style pour appliquer du CSS directement aux éléments HTML :
<element style="property: value;"></element>Exemple avec plusieurs propriétés :
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>Essayez vous-même
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Styling with CSS
4Les bases du texte
Couleur du texteFamille de policesTaille de policeGraisse de policeAlignement du texteDécoration du texteDéfi récapitulatif n°1Défi récapitulatif n°27Modèle de boîte - Partie 1
Qu'est-ce que le Modèle de boîte ?PaddingMargesBorduresLargeur et HauteurDéfi récapitulatif
5Couleurs et arrière-plans
Couleur d'arrière-planCouleurs HEXCouleurs RGBTransparence avec RGBADéfi récapitulatif n°1