L'attribut style en HTML - Tutoriel

L'attribut style en HTML - Tutoriel

L'attribut style est un attribut HTML utilisé pour définir le style d'un élément. Il est toujours défini dans l'élément ouvrant, entre des guillemets doubles.

Valeurs de l'attribut style

La valeur de l'attribut style est une chaîne de caractères contenant des propriétés CSS. Les propriétés CSS définissent les propriétés visuelles d'un élément, telles que sa couleur, sa taille, sa position, etc.

Exemples de valeurs de l'attribut style

Voici quelques exemples de valeurs de l'attribut style :

• color: red; : L'élément aura la couleur rouge.
• font-size: 18px; : La taille de la police de l'élément sera de 18 pixels.
• position: absolute; : L'élément sera positionné de manière absolue.

Utilisation de l'attribut style

L'attribut style est utilisé pour modifier l'apparence d'un élément sans avoir à utiliser une feuille de style externe.

Exemples plus détaillés

Voici quelques exemples plus détaillés de l'utilisation de l'attribut style :

• Changer la couleur d'un paragraphe

<p style="color: red;">Ce paragraphe est en rouge.</p>

Ce code change la couleur du paragraphe en rouge.

• Modifier la taille de la police d'un titre

<h1 style="font-size: 24px;">Ce titre est en gras et en grand.</h1>

Ce code change la taille de la police du titre en 24 pixels.

• Positionner un élément en haut à gauche de la page

<div style="position: absolute; top: 0; left: 0;">
  <p>Cet élément est positionné en haut à gauche de la page.</p>
</div>

Ce code positionne l'élément div en haut à gauche de la page.

Conclusion

L'attribut style est un outil puissant qui permet de modifier l'apparence des éléments HTML. En comprenant comment utiliser cet attribut, vous pouvez créer des pages web plus attrayantes et plus personnalisées.

Remarques

• L'attribut style est facultatif, mais il est souvent utilisé pour modifier l'apparence des éléments HTML.
• La valeur de l'attribut style doit être valide en CSS.
• Vous pouvez utiliser plusieurs propriétés CSS dans la valeur de l'attribut style.

Exemples supplémentaires

Voici quelques exemples supplémentaires de l'utilisation de l'attribut style :

• Changer la couleur de fond d'un élément

<p style="background-color: red;">Ce paragraphe a une couleur de fond rouge.</p>

• Ajouter une bordure à un élément

<p style="border: 1px solid black;">Ce paragraphe a une bordure noire d'un pixel.</p>

• Modifier la taille de l'élément

<p style="width: 200px; height: 100px;">Ce paragraphe a une largeur de 200 pixels et une hauteur de 100 pixels.</p>

• Modifier la position de l'élément

<p style="top: 100px; left: 200px;">Ce paragraphe est positionné à 100 pixels du haut et à 200 pixels de gauche.</p>

• Ajouter une police personnalisée à un élément

<p style="font-family: Arial, sans-serif;">Ce paragraphe utilise la police Arial.</p>

• Modifier l'alignement du texte d'un élément

<p style="text-align: center;">Ce paragraphe est centré.</p>

• Ajouter une ombre à un élément

<p style="box-shadow: 0 0 5px black;">Ce paragraphe a une ombre noire de 5 pixels.</p>

En comprenant les propriétés CSS, vous pouvez utiliser l'attribut style pour créer des effets visuels de toute sorte.