Aller au contenu principal

Le CSS

Rappel HTML

Le HTML est un langage de balisage utilisé pour définir la structure et le contenu d'une page web. Contrairement aux langages de programmation classiques (comme Python), le HTML ne contient pas de logique ou de calculs. Il décrit simplement des éléments d'une page, comme :

  • Des titres ;
  • Du texte ;
  • Des images ;
  • Des liens ;
  • Des tableaux ;
  • Des formulaires, etc.
Introduction CSS

Le CSS (Cascading Style Sheets) est un langage complémentaire au HTML qui contrôle l'apparence visuelle des éléments d'une page web. Tandis que le HTML structure le contenu, le CSS détermine comment ce contenu sera présenté, en définissant des propriétés comme :

  • La couleur ;
  • La taille ;
  • La police d'écriture ;
  • Les marges et les espaces ;
  • Les bordures, etc.

Ajout de CSS​

Le CSS peut être intégré dans une page de trois manières principales :

Styles en ligne​

Le CSS est appliqué directement sur une balise HTML à l’aide de l’attribut style :

<p style="color: red; font-size: 16px;">Ce texte est rouge et a une taille de 16px.</p>
Inconvénients

Peu pratique pour gérer de grandes quantités de styles.

CSS interne​

Les styles sont définis dans une balise <style> située dans la section <head> de la page HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <style>
            h1 {
                color: blue;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Titre principal</h1>
    </body>
</html>
Avantage

Idéal pour des projets simples ou du prototypage rapide.

Inconvénient

Les styles ne sont pas réutilisables entre plusieurs pages.

CSS externe​

Les styles sont écrits dans un fichier séparé (ex. : style.css) et liés à la page HTML avec une balise <link>.

Fichier "page.html" :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Titre principal</h1>
    </body>
</html>

Fichier "style.css" :

h1 {
    color: green;
    text-align: center;
    font-family: Arial, sans-serif;
}
Avantages
  • Réutilisation facile des styles entre plusieurs pages ;
  • Code HTML plus propre.

Syntaxe CSS​

Propriété

Le CSS utilise une syntaxe simple composée de sélecteurs, propriétés, et valeurs :

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

Cette syntaxe consiste à sélectionner un ensemble de balises (suivant un tag, une classe, un identifiant...), à choisir les propriétés à modifier (taille, couleur ...) et à leur attribuer une valeur spécifique.

Exemple :

p {             /* On sélectionne toutes les balises p */
    color: blue; /* couleur du texte en bleu */
    font-size: 18px; /* Taille de la police : 18px */
    margin: 10px; /* Marges autour du paragraphe */
}

Les sélecteurs permettent de cibler les éléments HTML à styliser. On en distingue plusieurs sortes :

  • Type : cible une balise HTML (tag) : 
    h1 {
        color: red;
    }
  • Classe (.) : cible les éléments avec une classe spécifique : 
    <p class="important">Texte important</p>
    .important {
        color : blue;
    }
  • ID (#) : cible un élément avec un identifiant unique : 
    <div id="header">En-tête</div>
    #header {
        background-color: black;
    }

Héritage​

Certains styles sont hérités automatiquement par les éléments enfants, comme la couleur du texte (color) ou la police (font-family).

Exemple :

body {
    font-family: Arial, sans-serif;
    color: black;
}

Tous les éléments dans <body> héritent de cette police et couleur, sauf si d’autres règles les modifient.

Si on dispose de ce body :

<body>
    <div id="identifiant">
        <h1>Courte page</h1>
        <p>Bienvenue sur ma page web.</p>
        <a href="https://www.example.com">
            <strong>Cliquez ici</strong> pour visiter mon site.
        </a>
    </div>
</body>

et de ce code CSS :

#identifiant {
    color : blue ;
}

Il indique que la couleur du texte de l'élément dont l'id est "identifiant" (la balise div) est en bleu.
Toutes les balises situées dans cette div vont hériter des propriétés CSS (si celles-ci ne sont pas modifiées).
Ainsi, le texte des balises h1, p et a situées dans la div auront pour couleur le bleu.

Vérifie tes connaissances

Question 1

À quoi sert le CSS ?