Guide complet des feuilles de style CSS

Introduction aux CSS

CSS (Cascading Style Sheets, ou feuilles de style en cascade) est une technologie fondamentale pour la conception de pages web. Elle permet de définir l'apparence visuelle des éléments HTML, incluant la mise en forme du texte (polices, tailles, alignement), les dimensions et styles des images (largeur, hauteur, bordures, marges), ainsi que la disposition globale et l'affichage des éléments sur la page.

CSS établit une séparation claire entre le contenu (les éléments HTML) et leur présentation visuelle (les styles CSS). Cette approche garantit une meilleure réutilisation du code et facilite considérablement sa maintenance.

Relation entre HTML et CSS

HTML :langage dédié à la structure et au contenu des pages web.
CSS :langage dédié à la définition du style visuel des éléments.
Règle :en cas de conflit entre les propriétés CSS et les attributs HTML, le standard W3C recommande de privilégier les styles CSS.

Modes d'intégration CSS

1. Intégration via la balise style

Cette méthode consiste à insérer les styles directement dans la section <head> du document HTML grâce à la balise <style>.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de style interne</title>
    <style>
        /* Syntaxe du sélecteur :
           sélecteur {
               propriété: valeur;
               propriété: valeur;
           }
        */
        section {
            font-size: 18px;
            background-color: #ffc0cb;
        }
    </style>
</head>
<body>
    <section>Bonjour à tous</section>
</body>
</html>

2. Styles en ligne

Les styles peuvent être appliqués directement sur une balise via l'attribut style. Cette méthode offre la priorité la plus élevée.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Styles en ligne</title>
    <style>
        section {
            font-size: 18px;
            background-color: #ffc0cb;
        }
    </style>
</head>
<body>
    <section style="background-color: #7fffd4; height: 200px;">Bonjour à tous</section>
</body>
</html>

3. Intégration via fichier externe

La méthode la plus recommandée pour les projets de taille moyenne à grande consiste à utiliser un fichier externe avec l'extension .css. Cette approche permet de centraliser les styles et d'améliorer la maintenabilité.

Contenu du fichier styles.css :

section {
    font-size: 30px;
    background-color: #ff0000;
}

Intégration dans le fichier HTML :


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Lien vers fichier externe</title>
    <style>
        section {
            font-size: 18px;
        }
    </style>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <section style="background-color: #7fffd4; height: 200px;">Bonjour à tous</section>
</body>
</html>

Les sélecteurs CSS

Les sélecteurs constituent l'élément central de CSS. Ils permettent de cibler précisément les éléments HTML auxquels appliquer des styles.

Sélecteurs de base

Sélecteur d'élément (étiquette)

Ce sélecteur cible toutes les occurrences d'une balise HTML spécifique.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Sélecteur d'élément</title>
    <style>
        section {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <section>Premier élément</section>
    <section>Deuxième élément</section>
    <section>Troisième élément</section>
</body>
</html>

Sélecteur d'identifiant (id)

Le sélecteur d'identifiant cible un élément unique grâce à son attribut id. La valeur de l'id doit être unique dans tout le document.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Sélecteur d'id</title>
    <style>
        section {
            font-size: 18px;
        }
        #element-1 {
            background-color: #ffc0cb;
        }
        #element-2 {
            background-color: #7fffd4;
        }
    </style>
</head>
<body>
    <section id="element-1">Premier élément</section>
    <section id="element-2">Deuxième élément</section>
    <section id="element-3">Troisième élément</section>
</body>
</html>

Sélecteur de classe

Le sélecteur de classe cible tous les éléments partageant le même attribut class. Contrairement aux identifiants, les classes peuvent être réutilisées.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Sélecteur de classe</title>
    <style>
        .style-principal {
            font-size: 18px;
            background-color: #ffc0cb;
        }
    </style>
</head>
<body>
    <section id="element-1" class="style-principal">Premier élément</section>
    <section id="element-2">Deuxième élément</section>
    <section id="element-3" class="style-principal style-additionnel">Troisième élément</section>
</body>
</html>

Sélecteurs d'attributs

Ces sélecteurs permettent de cibler les éléments selon leurs attributs, qu'ils soient personnalisés ou standard.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Sélecteurs d'attributs</title>
    <style>
        /* Cible tous les éléments ayant l'attribut 'data-custom' */
        [data-custom] {
            background-color: #ffc0cb;
        }
        /* Cible les éléments avec data-custom="valeur1" */
        [data-custom="valeur1"] {
            background-color: #7fffd4;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <section id="elem-1" class="style-principal" data-custom="valeur1">Premier élément</section>
    <section id="elem-2">Deuxième élément</section>
    <section id="elem-3" class="style-principal" data-custom="valeur2">Troisième élément</section>
</body>
</html>

Sélecteurs descendants et directs

Ces sélecteurs permettent de cibler des éléments en fonction de leur hiérarchie.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Sélecteurs hiérarchiques</title>
    <style>
        /*
         * Sélecteur descendant (espace) : tous les éléments 'a' dans 'section'
         * section a { }
         * section span a { }
         * section #sp-1 #lien-1 { }
         * #container-1 #sp-1 #lien-1 { }
         * .conteneur a { }
         * 
         * Sélecteur direct (>) : uniquement les enfants directs
         * section > span
         */
        section a {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <section id="container-1" class="conteneur" data-custom="valeur1">
        <span id="sp-1">
            <a id="lien-1" href="#">Lien externe</a>
        </span>
    </section>
    <section id="container-2">
        <span>
            <a href="#">Autre lien</a>
        </span>
    </section>
    <a href="#">Lien hors section</a>
</body>
</html>

Sélecteurs combinés


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Sélecteurs combinés</title>
    <style>
        /* Sélecteur universel (*) */
        ul * { }
        
        /* Sélecteur d'intersection */
        li. Active { }
        
        /* Sélecteur de groupe (virgule) */
        ul > span, .Active { }
        
        /* Descendants (espace) */
        ul li { }
        
        /* Enfants directs (>) */
        ul > span { }
        
        /*ibling adjacent (+) */
        .Active + li { }
        
        /* Sélecteur de siblings (~) */
        .Active ~ * { }
        .Active ~ li { }
    </style>
</head>
<body>
    <ul>
        <li>AAAAA</li>
        <li class="Active">CCCCC</li>
        <li title="texte"><span>BBBBB</span></li>
        <li title="texte"><span>DDDD</span></li>
        <span>EEEEE</span>
    </ul>
</body>
</html>

Cas particulier : les liens (balise <a>)

La plupart des propriétés de style sont héritées par les éléments enfants. Cependant, la balise <a> ne transmet pas automatiquement certaines propriétés comme la couleur du texte.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Style des liens</title>
    <style>
        #container-1, #container-1 a, #container-3, #container-3 a {
            font-size: 18px;
            background-color: #ffc0cb;
            color: #ffff00;
        }
    </style>
</head>
<body>
    <section id="container-1" class="conteneur" data-custom="valeur1">
        <span id="sp-1">
            <a id="lien-1" href="#">Google</a>
        </span>
        <span>Moteur de recherche</span>
    </section>
    <section id="container-2">
        <span>
            <a href="#">Bing</a>
        </span>
        <span>Autre moteur</span>
    </section>
    <section id="container-3">
        <span>
            <a href="#">DuckDuckGo</a>
        </span>
        <span>Moteur privé</span>
    </section>
</body>
</html>

Pseudo-éléments

Les pseudo-éléments permettent de styliser des parties spécifiques d'un élément.

Documentation de référence : W3Schools - Pseudo-éléments CSS


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Pseudo-éléments</title>
    <style>
        .boite {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #7fffd4;
        }
        .boite::after {
            content: " !!!";
            color: red;
            font-size: 18px;
        }
        .boite::before {
            content: "O-O ";
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="boite">Bonjour</div>
</body>
</html>

Pseudo-classes

Les pseudo-classes définissent des états particuliers des éléments.

Documentation de référence : W3Schools - Pseudo-classes CSS


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Pseudo-classes</title>
    <style>
        .carre {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #7fffd4;
        }
        .carre:hover {
            background-color: #ffff00;
            cursor: pointer;
        }
        
        a {
            text-decoration: none;
        }
        a:link {
            color: #7fffd4;
        }
        a:hover {
            color: blue;
        }
        a:active {
            color: red;
        }
        a:visited {
            color: black;
        }
    </style>
</head>
<body>
    <div class="carre">Survolez-moi</div>
    <a href="https://www.google.fr">Cliquez ici</a>
</body>
</html>

Priorité des sélecteurs

Le mécanisme d'héritage permet aux éléments enfants de récupérer les styles de leurs parents. En cas de ciblage multiple, c'est la pondération des sélecteurs qui détermine lesquels sont appliqués.

Niveaux de priorité (poids) :

Héritage : poids = 0
Sélecteur d'élément : poids = 1
Sélecteur de classe : poids = 10
Sélecteur d'id : poids = 100
Style en ligne : poids = 1000
!important : priorité absolue (à utiliser avec précaution)


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Priorité des sélecteurs</title>
    <style>
        section {
            color: red;
        }
        .texte-important {
            color: purple !important;
        }
        #id-specifique {
            color: #7fffd4;
        }
    </style>
</head>
<body>
    <section class="conteneur">
        Contenu principal
        <section class="sous-conteneur">
            <span class="texte-important texte-autre id-specifique" style="color: black">Contenu imbriqué</span>
        </section>
    </section>
</body>
</html>

Propriétés CSS essentielles

Dimensions (width/height)


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Dimensions</title>
    <style>
        #bloc-principal {
            width: 200px;
            height: 200px;
            background-color: #ffc0cb;
        }
        #bloc-principal div {
            width: 80%;
            height: 80%;
            background-color: #ff0000;
        }
        #texte-1 {
            width: 200px;
            height: 200px;
            background-color: #7fffd4;
            font-size: 12px;
        }
        #texte-2 {
            width: 200px;
            height: 200px;
            background-color: #ffff00;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="bloc-principal">
        <div></div>
    </div>
    <span id="texte-1">Texte court</span>
    <span id="texte-2">Texte plus long</span>
</body>
</html>

Typographie


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Typographie</title>
    <style>
        .zone-texte {
            font-size: 20px;
            color: green;
            font-family: "Arial", "Verdana", sans-serif;
            font-weight: 400;
            width: 800px;
            height: 600px;
            background-color: #7fffd4;
            /* Alignement horizontal */
            /* text-align: right; */
            /* text-align: center; */
            /* text-align: left; */
            
            /* Alignement vertical */
            line-height: 600px;
        }
    </style>
</head>
<body>
    La taille par défaut est 16px
    <div class="zone-texte">Bonjour</div>
</body>
</html>

Couleur de fond


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Couleur de fond</title>
    <style>
        .boite-couleur {
            width: 200px;
            height: 200px;
            /* Noms de couleurs */
            /* background-color: green; */
            /* Notation hexadécimale */
            /* background-color: #ffb7a7; */
            /* Notation rgb */
            background-color: rgb(255, 183, 167);
            opacity: 0.3;
            /* Notation raccourcie rgba */
            /* background-color: rgba(255, 183, 167, 0.3); */
        }
    </style>
</head>
<body>
    <div class="boite-couleur"></div>
</body>
</html>

Image de fond


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Image de fond</title>
    <style>
        .boite-fond {
            width: 600px;
            height: 600px;
            /* background-color: #7fffd4; */
            /* background-image: url("./image.jpg"); */
            
            /* Répétition */
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            
            /* Position */
            /* background-repeat: no-repeat; */
            /* background-position: center center; */
            /* background-position: 20px 40px; */
            
            /* Propriété raccourcie */
            background: #7fffd4 url("./image.jpg") no-repeat center center;
        }
    </style>
</head>
<body>
    <div class="boite-fond"></div>
</body>
</html>

Bordures


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Bordures</title>
    <style>
        .bordure-boite {
            width: 500px;
            height: 500px;
            text-align: center;
            line-height: 500px;
            /* Bordure complète */
            /* border: 5px solid red; */
            
            /* Bordures individuelles */
            /* border-left: 5px solid red; */
            /* border-top: 5px solid red; */
            /* border-right: 5px solid red; */
            /* border-bottom: 5px solid red; */
            
            /* Propriétés séparées */
            border-width: 4px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="bordure-boite">Bonjour</div>
</body>
</html>

Modèle de boîte (Box Model)

Le modèle de boîte CSS comprend quatre zones :

Content : le contenu (texte, images)
Padding : l'espacement interior
Border : la bordure
Margin : la marge exterior


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Modèle de boîte</title>
    <style>
        .boite {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }
        #boite-1 {
            border: 5px solid #7fffd4;
            /* Syntaxes du padding/margin :
               padding: 10px 10px;        上下 左右
               padding: 10px 10px 10px 10px; 上 右 下 左
               padding-left: 10px;
               padding-right: 10px;
               padding-top: 10px;
               padding-bottom: 10px;
            */
            padding: 10px 10px;
            margin: 10px 10px;
        }
        #boite-2 {
            border: 5px solid #ff1493;
            padding: 10px 10px;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
    <div id="boite-1" class="boite">Premier</div>
    <div id="boite-2" class="boite">Deuxième</div>
</body>
</html>

Marges par défaut du body


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Reset des marges</title>
    <style>
        body {
            margin: 0;
        }
        .zone {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #7fffd4;
        }
    </style>
</head>
<body>
    <div class="zone">Bonjour</div>
</body>
</html>

Propriété display

La propriété display contrôle le type de boîte généré par un élément.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Display</title>
    <style>
        .boite {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #bloc-1 {
            background-color: #7fffd4;
        }
        #bloc-2 {
            background-color: #ff1493;
            display: none;
        }
        .ligne {
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    <div id="bloc-1" class="boite" hidden>Visible</div>
    <div id="bloc-2" class="boite">Caché</div>
    <span class="ligne">Texte en ligne</span>
</body>
</html>

Float (Flottement)

La propriété float permet de sortir les éléments du flux normal pour les positionner à gauche ou à droite.


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
        body {
            margin: 0;
        }
        .conteneur div {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #element-1 {
            background-color: #7fffd4;
            float: left;
        }
        #element-2 {
            background-color: #ff1493;
            float: right;
        }
        .texte {
            background-color: #ffff00;
        }
    </style>
</head>
<body>
    <div class="conteneur">
        <div id="element-1">Gauche</div>
        <div id="element-2">Droite</div>
    </div>
    <span class="texte">Texte qui suit</span>
</body>
</html>

Résoudre les problèmes de collapse

Les éléments flottants sortent du flux, ce qui peut provoquer l'effondrement du conteneur parent. Trois solutions principales :

Solution 1 : Hauteur fixe


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Clearfix - Hauteur fixe</title>
    <style>
        body {
            margin: 0;
        }
        .conteneur div {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #element-1 {
            background-color: #7fffd4;
        }
        #element-2 {
            background-color: #ff1493;
            float: right;
        }
        #zone-suite {
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #ffff00;
            clear: bottom;
        }
        .texte {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="conteneur">
        <div id="element-1">Gauche</div>
        <div id="element-2">Droite</div>
    </div>
    <div id="zone-suite">Zone suivante</div>
    <span class="texte">Texte final</span>
</body>
</html>

Solution 2 : Pseudo-élément clearfix


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Clearfix - Pseudo-élément</title>
    <style>
        body {
            margin: 0;
        }
        .conteneur div {
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #element-1 {
            background-color: #7fffd4;
            float: left;
        }
        #element-2 {
            background-color: #ff1493;
            float: right;
        }
        #zone-suite {
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #ffff00;
        }
        .texte {
            background-color: green;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="conteneur clearfix">
        <div id="element-1">Gauche</div>
        <div id="element-2">Droite</div>
    </div>
    <div id="zone-suite">Zone suivante</div>
    <span class="texte">Texte final</span>
</body>
</html>

Positionnement

Types de positionnement

static : positionnement par défaut
relative : positionnement relatif à la position initiale
absolute : positionnement absolu par rapport au premier ancêtre positionné
fixed : positionnement fixe par rapport à la fenêtre du navigateur

Positionnement relatif


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Positionnement relatif</title>
    <style>
        body {
            margin: 0;
        }
        .conteneur div, .bloc-suite {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .premier {
            background-color: #7fffd4;
        }
        .deuxieme {
            background-color: purple;
            position: relative;
            bottom: 100px;
        }
        .troisieme {
            background-color: #ff1493;
        }
    </style>
</head>
<body>
    <div class="conteneur">
        <div class="premier">Bloc 1</div>
        <div class="deuxieme">Bloc 2</div>
    </div>
    <div class="bloc-suite">Bloc suivant</div>
</body>
</html>

Positionnement absolu


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Positionnement absolu</title>
    <style>
        body {
            margin: 0;
        }
        .conteneur div, .bloc-suite {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        .premier {
            background-color: #7fffd4;
        }
        .conteneur {
            margin-top: 200px;
            position: relative;
        }
        .deuxieme {
            background-color: purple;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .bloc-suite {
            background-color: #ffc0cb;
        }
    </style>
</head>
<body>
    <div class="conteneur">
        <div class="premier">Bloc 1</div>
        <div class="deuxieme">Bloc 2</div>
    </div>
    <div class="bloc-suite">Bloc suivant</div>
</body>
</html>

Positionnement fixe


<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Positionnement fixe</title>
    <style>
        #retour-haut {
            height: 25px;
            width: 70px;
            position: fixed;
            right: 10px;
            bottom: 20px;
            background-color: #7fffd4;
            text-align: center;
            line-height: 25px;
        }
        #retour-haut a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <div id="haut"></div>
    <a href="#section1">Chapitre 1</a>
    <a href="#section2">Chapitre 2</a>
    <a href="#section3">Chapitre 3</a>
    <div id="section1" style="height: 1000px;">Contenu Chapitre 1</div>
    <div id="section2" style="height: 1000px;">Contenu Chapitre 2</div>
    <div id="section3" style="height: 1000px;">Contenu Chapitre 3</div>
    <span id="retour-haut">
        <a href="#haut">Haut de page</a>
    </span>
</body>
</html>

Étiquettes: CSS HTML feuilles de style web design frontend

Publié le 5 juillet à 17h31

L'Atelier Monstre