Derniers tutoriels de développement web

Styles HTML

Styles HTML

I am red

I am blue

Essayez vous - même »

Le code HTML de Style Attribute

Réglage du style d'un élément HTML, peut être fait avec le style de l' attribut.

L'attribut HTML style a la syntaxe suivante:

style=" property : value; "

La property est une propriété CSS. La value est une valeur CSS.

Vous en apprendrez plus sur CSS plus loin dans ce tutoriel.


Couleur de fond HTML

L' background-color de background-color propriété définit la couleur d'arrière - plan pour un élément HTML:

Cet exemple définit l'arrière-plan d'une page à lightgrey:

Exemple

<body style="background-color:lightgrey;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Essayez vous - même »

HTML Texte Couleur

La color propriété définit la couleur du texte pour un élément HTML:

Exemple

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Essayez vous - même »

HTML Polices

La font-family propriété définit la police à utiliser pour un élément HTML:

Exemple

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Essayez vous - même »

Taille du texte HTML

La font-size la font-size propriété définit la taille du texte pour un élément HTML:

Exemple

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Essayez vous - même »

Alignement du texte HTML

Le text-align propriété définit l'alignement du texte horizontal pour un élément HTML:

Exemple

<h1 style="text-align:center;">Centered Heading</h1>
<p>This is a paragraph.</p>
Essayez vous - même »

Résumé du chapitre

  • Utilisez le style de l' attribut pour les éléments HTML de style
  • Utilisez background-color pour la couleur d'arrière - plan
  • Utilisez la color pour les couleurs de texte
  • Utilisez font-family pour les polices de texte
  • Utilisez la font-size la font-size pour la taille du texte
  • Utilisez text-align pour l' alignement du texte

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»