Styles CSS en HTML

Introduction

Les styles CSS permettent de définir l'apparence des éléments HTML sur une page web. Dans ce tutoriel, nous allons explorer comment appliquer des styles CSS pour personnaliser le design de vos pages.

Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour cibler les éléments HTML que vous souhaitez styliser. Voici quelques exemples :


            h1 {
                color: #4285f4;
            }

            p {
                font-size: 16px;
                line-height: 1.5;
            }

Classes et IDs

Les classes et les IDs sont utilisés pour appliquer des styles spécifiques à certains éléments. Exemple :


            .highlight {
                background-color: #ffff00;
            }

            #header {
                font-size: 24px;
            }

Exercice : Ajouter une Classe

Ajoutez une classe "important" à un paragraphe et appliquez-lui une couleur de fond jaune.

Correction :

        
                    <style>
                        .important {
                            background-color: #ffff00;
                        }
                    </style>

                    <p class="important">Ceci est un paragraphe important.</p>

Propriétés CSS Courantes

Voici quelques propriétés CSS couramment utilisées :

Color : Définit la couleur du texte.
Font-size : Définit la taille de la police.
Background-color : Définit la couleur de fond.
Margin : Définit la marge autour d'un élément.
Padding : Définit l'espace à l'intérieur d'un élément.
Border : Définit la bordure d'un élément.

Utilisation des Pseudo-éléments

Les pseudo-éléments comme ::before et ::after permettent d'ajouter du contenu à un élément. Exemple :


            p::before {
                content: "➤ ";
                color: #4285f4;
            }

Utilisation des Pseudo-classes

Les pseudo-classes comme :hover permettent d'appliquer des styles lorsqu'un élément est survolé par la souris. Exemple :


            a:hover {
                text-decoration: underline;
            }

Conclusion

Les styles CSS offrent une puissante capacité de personnalisation pour vos pages web. Explorez davantage les propriétés CSS et expérimentez avec différents sélecteurs pour créer des designs uniques.

Proposition d'un Examen avec Correction

Quelle propriété CSS est utilisée pour définir la couleur du texte?
- A. Background-color
- B. Color
- C. Font-size
Correction : B

Styles CSS en HTML

Le CSS, ou Cascading Style Sheets, est un langage de programmation utilisé pour styliser les pages Web. Il permet de contrôler l'apparence des éléments HTML, tels que la couleur, la taille de la police, la position et la mise en forme.

Il existe trois principaux types de styles CSS :

CSS externe : les styles sont définis dans un fichier CSS séparé.
CSS interne : les styles sont définis dans la section head du fichier HTML.
CSS en ligne : les styles sont définis dans l'attribut style de l'élément HTML.

CSS externe

Le CSS externe est la méthode la plus courante pour styliser les pages Web. Les styles sont définis dans un fichier CSS séparé, ce qui permet de centraliser le style de votre page Web et de faciliter la maintenance.

Pour utiliser un CSS externe, vous devez créer un fichier CSS avec l'extension .css. Le contenu du fichier CSS est constitué de règles CSS qui définissent le style de votre page Web.

Voici un exemple de fichier CSS externe :

body {
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  color: #000000;
}

p {
  margin-bottom: 16px;
}

Pour lier le fichier CSS externe à votre code HTML, vous devez utiliser l'attribut href de la balise link.

Voici un exemple de code HTML qui lie un fichier CSS externe :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Exemple de CSS externe</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Titre</h1>
  <p>Ce texte est stylé par le CSS externe.</p>
</body>
</html>

Dans cet exemple, le fichier CSS externe style.css est lié au fichier HTML. Les styles définis dans le fichier CSS externe sont appliqués à tous les éléments HTML de la page Web.

CSS interne

Le CSS interne est une autre méthode courante pour styliser les pages Web. Les styles sont définis dans la section head du fichier HTML.

Pour utiliser un CSS interne, vous devez inclure le code CSS dans la section head du fichier HTML. Le code CSS doit être placé entre les balises style.

Voici un exemple de CSS interne :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Exemple de CSS interne</title>
  <style>
    /* CSS interne */
    body {
      background-color: #ffffff;
      font-family: sans-serif;
      font-size: 16px;
    }

    h1 {
      font-size: 24px;
      color: #000000;
    }

    p {
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <h1>Titre</h1>
  <p>Ce texte est stylé par le CSS interne.</p>
</body>
</html>

Dans cet exemple, le CSS interne définit les mêmes styles que le CSS externe de l'exemple précédent.

CSS en ligne

Le CSS en ligne est la méthode la plus simple pour styliser les pages Web. Les styles sont définis dans l'attribut style de l'élément HTML.

Pour utiliser un CSS en ligne, vous devez ajouter l'attribut style à l'élément HTML que vous souhaitez styliser. L'attribut style doit contenir les règles CSS que vous souhaitez appliquer à l'élément.

Voici un exemple de CSS en ligne :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Exemple de CSS en ligne</title>
</head>
<body>
  <h1 style="color: red;">Titre</h1>
  <p style="font-size: 24px;">Ce texte est stylé par le CSS en ligne.</p>
</body>
</html>