Styles en HTML - Tutoriel

Introduction

Styliser vos pages HTML est essentiel pour créer une expérience utilisateur agréable. Ce tutoriel explore différentes méthodes pour appliquer des styles, y compris l'utilisation de balises de style, de feuilles de style CSS internes et externes.

Exemples

Exemple 1 : Utilisation de Balises de Style

Utilisation de la balise `<style>` pour appliquer des styles à un paragraphe :

       <style>
            p {
                color: blue;
                font-size: 16px;
            }
        </style>

        <p>Ce paragraphe est stylisé en bleu avec une taille de police de 16px.</p>

Exemple 2 : Feuille de Style CSS Interne

Utilisation d'une feuille de style CSS interne pour styliser plusieurs éléments :

       <head>
            <style>
                h1 {
                    color: green;
                    text-align: center;
                }

                .highlight {
                    background-color: yellow;
                }
            </style>
        </head>

        <body>
            <h1>Titre Principal</h1>
            <p class="highlight">Ce paragraphe a une mise en surbrillance jaune.</p>
        </body>

Exercices avec Corrections

Exercice 1 : Styliser un Texte

Utilisez une balise de style pour styliser un texte en gras et avec une couleur rouge :

       <style>
            .bold-red {
                font-weight: bold;
                color: red;
            }
        </style>

        <p class="bold-red">Ce texte est en gras et en rouge.</p>

Questions à Choix Multiple (QCM)

Quelle est la balise utilisée pour inclure des styles CSS directement dans une page HTML?
- A. <link>
- B. <style>
- C. <head>
Réponse correcte : B

Questions & Réponses

Question : Quelle est la différence entre une balise de style et une feuille de style externe?

Réponse : Une balise de style est utilisée pour inclure des styles directement dans la page HTML, tandis qu'une feuille de style externe (fichier CSS) est un fichier séparé qui peut être lié à plusieurs pages HTML.

Études de Cas

Cas d'utilisation : Création d'un Bouton Stylisé

Utilisez des styles pour créer un bouton avec une couleur de fond et une bordure :

       <style>
            .styled-button {
                background-color: #007bff;
                color: #fff;
                padding: 10px 20px;
                border: 2px solid #0056b3;
                border-radius: 5px;
            }
        </style>

        <button class="styled-button">Cliquez ici</button>

Éléments à Retenir

Les balises de style et les feuilles de style CSS sont utilisées pour appliquer des styles en HTML.
Les balises de style sont utilisées pour inclure des styles directement dans une page HTML.
Les feuilles de style externes (fichiers CSS) sont utilisées pour appliquer des styles à plusieurs pages HTML.

Proposition d'un Examen avec Correction

Quelle est la balise utilisée pour inclure des styles CSS directement dans une page HTML?
- A. <link>
- B. <style>
- C. <head>
Correction : B

Styles en HTML

Les styles en HTML sont utilisés pour définir la mise en forme du contenu d'une page web. Ils peuvent être utilisés pour modifier la taille, la couleur, la police, la position et d'autres aspects du contenu.

Les propriétés CSS

Les styles en HTML sont définis à l'aide des propriétés CSS. Les propriétés CSS sont des noms qui définissent une propriété spécifique du contenu. Par exemple, la propriété font-size définit la taille de la police.

Les valeurs des propriétés CSS

Les valeurs des propriétés CSS sont des valeurs qui définissent la valeur de la propriété. Par exemple, la valeur 16px de la propriété font-size définit une taille de police de 16 pixels.

L'utilisation des styles en HTML

Les styles en HTML sont utilisés en associant les propriétés CSS aux éléments HTML. Par exemple, pour définir la taille de la police des paragraphes, vous pouvez utiliser le code suivant :

<p style="font-size: 16px;">Ce paragraphe a une taille de police de 16 pixels.</p>

Ce code définit la taille de la police des paragraphes à 16 pixels.

Exemples d'utilisation des styles en HTML

Voici quelques exemples d'utilisation des styles en HTML :

Pour définir la taille de la police

<p style="font-size: 16px;">Ce paragraphe a une taille de police de 16 pixels.</p>

Pour définir la couleur du texte

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

Pour définir la police du texte

<p style="font-family: Arial;">Ce paragraphe est en police Arial.</p>

Pour définir la position du texte

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

Pour ajouter une bordure au texte

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

Remarques

Les styles en HTML sont facultatifs.
Les styles en HTML doivent être utilisés de manière cohérente.
Les styles en HTML ne doivent pas être utilisés pour créer un effet visuel trop important.

Exemples supplémentaires

Voici quelques exemples supplémentaires d'utilisation des styles en HTML :

Pour définir la taille de la police des titres

<h1 style="font-size: 24px;">Ce titre a une taille de police de 24 pixels.</h1>

Pour définir la couleur du texte des liens

<a href="https://example.com" style="color: blue;">Ce lien est en bleu.</a>

Pour définir la police du texte des listes

<ul style="font-family: sans-serif;">
  <li>Liste 1</li>
  <li>Liste 2</li>
</ul>

Pour définir la position du texte des tableaux

<table style="text-align: center;">
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valeur 1</td>
      <td>Valeur 2</td>
    </tr>
  </tbody>
</table>

Pour ajouter une bordure aux images

<img src="image.jpg" style="border: 1px solid black;">

En comprenant comment utiliser les styles en HTML, vous pouvez créer des pages web plus attrayantes et plus accessibles.

Conclusion

Les styles en HTML sont un outil puissant qui peut être utilisé pour améliorer l'apparence de vos pages web. En comprenant comment les utiliser, vous pouvez créer des pages web plus belles et plus faciles à lire.