Aller au contenu principal

Ajouter du style

Donner vie à votre site avec le CSS

Notions théoriques​

Le CSS (Cascading Style Sheets) est un langage qui permet de définir le style d'une page Web : la disposition et l'apparence visuelle.

Chaque règle CSS est composée de 2 parties principales :

  • un sélecteur indique à quel élément HTML la règle s'applique
  • et un bloc de déclaration qui contient une ou plusieurs déclarations propriété: valeur;

Chaque déclaration comprend une propriété CSS et une valeur, séparées par 2 points :

sélecteur {
    propriété: valeur;
    propriété: valeur;
}

Il existe 3 façons d'intégrer le CSS dans une page HTML : inline, interne et externe.

  1. Inline : Le CSS est appliqué directement à l'attribut style d'un élément HTML. C'est la méthode la moins flexible car elle ne permet pas de réutilisation du code.
  2. Interne : Le CSS est placé dans une balise <style> dans l'en-tête <head> de votre document HTML. Il s'applique à l'ensemble du document, mais pas à plusieurs pages.
  3. Externe : Le CSS est placé dans un fichier séparé (généralement avec une extension .css) et est lié à votre document HTML à l'aide d'une balise <link>. C'est la méthode la plus flexible et la plus couramment utilisée car elle permet de réutiliser le même code CSS sur plusieurs pages.

Exemple pratique​

Créons une page HTML simple et appliquons du CSS de 3 manières différentes.

<!DOCTYPE html>
<html>
<head>
    <title>Mon premier CSS</title>
    <!-- CSS externe -->
    <link rel="stylesheet" href="styles.css">
    <!-- CSS interne -->
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <!-- CSS inline -->
    <h1 style="color: red;">Bonjour le monde !</h1>
    <p>Bienvenue sur ma première page avec CSS.</p>
</body>
</html>

Et dans le fichier styles.css:

p {
    color: green;
}

Test de mémorisation/compréhension​


Qu'est-ce que le CSS ?


Quelle est la syntaxe correcte en CSS ?


Qu'est-ce qu'un sélecteur en CSS ?


Quelle est la syntaxe correcte pour un commentaire en CSS ?


Que signifie CSS ?


Quelle est la syntaxe correcte pour appliquer un style inline en HTML ?


Quelle propriété CSS permet de changer la couleur de fond d'un élément ?


Quelle est la syntaxe correcte pour lier une feuille de style externe à un document HTML ?


Quelle propriété CSS permet de changer la couleur du texte ?


TP pour réfléchir et résoudre des problèmes​

Créez une page HTML avec :

  • 1 titre,
  • 2 paragraphes
  • et 1 liste à puces.

Utilisez les 3 méthodes d'intégration du CSS :

  • inline,
  • interne
  • et externe.

Appliquez les styles suivants à ces éléments :

  • le fond de la page avec une couleur bleue claire 
    background-color: lightblue;
  • le titre de couleur rouge 
    color: red;
  • les paragraphes de couleur verte 
    color: green;
  • et les éléments de la liste sans afficher les puces : 
    list-style-type: none;
Une solution
<!DOCTYPE html>
<html>
<head>
    <title>Mon TP CSS</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h1 style="color: red;">Mon TP CSS</h1>
    <p>Bienvenue sur ma page de TP.</p>
    <p>Voici une liste :</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Et dans le fichier styles.css:

p {
    color: green;
}

ul {
    list-style-type: none;
}