Skip to main content

Introduction au CSS

Choisissez votre classe

Après avoir structuré ta page, il est temps de la rendre belle avec le CSS ! Le CSS (Cascading Style Sheets) te permet de contrôler l’apparence de tes pages HTML. On va voir comment ajouter du style à tout ce que tu as créé.

Inclure du CSS dans HTML​

Il y a plusieurs façons d’ajouter du CSS à ta page :

Dans le fichier HTML​

<style>
    body {
        background-color: lightblue;
    }
</style>

En utilisant un fichier externe :​

<link rel="stylesheet" href="styles.css">

Les Sélecteurs CSS​

Les sélecteurs te permettent de cibler les éléments à styliser. Tu as 3 manière principales de le faire

Sélecteur d'élément par la balise :​

De cette manière tu vas pouvoir sélectionner les éléments par leur noms de balise, attention, de cette manière tu vas sélectionner TOUTES les balises qui sont du type paragraphe par exemple comme ci-dessous.

p {
    color: blue;
}

Sélecteur d'id :​

Tu vas attribuer à ta balise HTML un ID, qui est un attribut unique, comme un numéro de joueur de foot sur le terrain. Tu ne dois donc absolument pas accorder un ID similaire à deux ou plusieurs balises ! Cela se fait par le signe #

Par exemple, j'ai dans mon code deux balises de type paragraphe, si je veux sélectionner uniquement le premier paragraphe afin de lui appliquer du style alors je vais lui attribuer un ID.

Dans mon html :

<p id="p1">Mon premier paragraphe </p>
<p id="p2">Mon deuxième paragraphe </p>

Dans mon CSS :

#p1 {
    font-size: 20px;
    color: red;
}

Sélecteur de classe :​

Enfin, si je souhaite sélectionner par classe il faut que j'attribue à ma balise une classe qui va me permettre de la sélectionner par la suite du côté de mon CSS.

Dans mon html :

<p class="p1">Mon premier paragraphe </p>
<p class="p2">Mon deuxième paragraphe </p>

Dans mon CSS :

.p1 {
    font-size: 20px;
    color: red;
}

.p2 {
    font-size: 20px;
    color: blue;
}