Introduction au Développement HTML et CSS
Introduction au Développement HTML et CSS

Syntaxe CSS : sélecteurs, propriétés, valeurs

Introduction au CSS et sa Syntaxe Fondamentale

Bienvenue dans cette leçon consacrée à la syntaxe fondamentale du CSS (Cascading Style Sheets). Dans le cadre de votre Introduction au Développement HTML et CSS, vous avez appris que HTML structure le contenu de votre page web. Le CSS, quant à lui, est le langage qui donne du style et présente ce contenu. Sans CSS, les pages web seraient austères, se présentant comme de simples documents texte.

Comprendre la syntaxe du CSS est la première étape cruciale pour pouvoir transformer des balises HTML brutes en interfaces utilisateur attrayantes et responsives. Une feuille de style CSS est composée d'une série de règles (ou règles de style). Chaque règle indique quels éléments HTML doivent être stylisés et comment ils doivent l'être.

Une règle CSS typique est construite autour de trois composants principaux :

  1. Le Sélecteur : Il désigne les éléments HTML à cibler.
  2. La Propriété : Il s'agit de la caractéristique de l'élément que l'on souhaite modifier (par exemple, la couleur, la taille de la police, la marge).
  3. La Valeur : C'est la manière dont la propriété sera modifiée (par exemple, "rouge", "16px", "auto").

Ensemble, ces composants forment une structure claire et prévisible que nous allons explorer en détail.

I. La Structure d'une Règle CSS

Une règle CSS se présente toujours sous la forme suivante :

sélecteur {
  propriété: valeur;
  propriété: valeur;
  /* ... autres déclarations ... */
}

Décomposons cette structure :

  • sélecteur : C'est la partie de la règle qui sélectionne l'élément HTML auquel le style sera appliqué. Il est placé au début de la règle.
  • {} (Accolades) : Elles entourent les déclarations CSS. Tout ce qui se trouve entre les accolades s'applique au sélecteur ciblé.
  • propriété : C'est l'attribut visuel ou structurel de l'élément que vous souhaitez modifier (ex: color, font-size, margin). Les propriétés sont toujours suivies d'un deux-points :.
  • valeur : C'est la valeur spécifique que vous donnez à la propriété (ex: blue, 24px, 10px auto). La valeur est toujours suivie d'un point-virgule ;.
  • ; (Point-virgule) : Il sépare chaque déclaration (paire propriété: valeur). Le point-virgule est obligatoire après chaque déclaration, sauf pour la dernière déclaration dans un bloc (bien que le mettre même pour la dernière soit une bonne pratique et aide à éviter les erreurs lors de l'ajout de nouvelles déclarations).

Exemple simple :

p {
  color: blue;
  font-size: 16px;
}

Dans cet exemple :

  • p est le sélecteur.
  • { ... } est le bloc de déclarations.
  • color: blue; est une déclaration où color est la propriété et blue est la valeur.
  • font-size: 16px; est une autre déclaration où font-size est la propriété et 16px est la valeur.

II. Les Sélecteurs CSS : Cibler les Éléments HTML

Les sélecteurs sont la pierre angulaire du CSS. Ils vous permettent de choisir avec précision les éléments HTML sur lesquels vous souhaitez appliquer un style. Il existe plusieurs types de sélecteurs, chacun ayant ses propres avantages.

A. Sélecteurs de Type (ou d'Élément)

Ce sont les sélecteurs les plus simples. Ils ciblent tous les éléments HTML du type spécifié.

  • Syntaxe : Le nom de la balise HTML.
  • Exemples :
    • p cible tous les paragraphes <p>.
    • h1 cible tous les titres <h1>.
    • a cible tous les liens <a>.
/* Cible tous les paragraphes */
p {
  line-height: 1.6;
}

/* Cible tous les titres de niveau 2 */
h2 {
  color: #333;
  text-align: center;
}

B. Sélecteurs de Classe

Les sélecteurs de classe sont parmi les plus utilisés car ils offrent une grande flexibilité. Vous pouvez appliquer la même classe à plusieurs éléments HTML différents, et un même élément HTML peut avoir plusieurs classes.

  • Syntaxe : Un point . suivi du nom de la classe. Le nom de la classe est défini via l'attribut class en HTML.
  • Exemples : .btn, .card, .text-danger.
<!-- HTML -->
<p class="introduction">Ceci est un paragraphe d'introduction.</p>
<button class="btn btn-primary">Cliquez-moi</button>
<div class="card">
  <h3 class="card-title">Titre de la Carte</h3>
  <p class="card-text">Contenu de la carte.</p>
</div>

/* CSS */
/* Cible tous les éléments avec la classe 'introduction' */
.introduction {
  font-style: italic;
  color: #555;
}

/* Cible tous les éléments avec la classe 'btn' */
.btn {
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

/* Cible tous les éléments avec la classe 'btn-primary' (peut être combiné avec .btn) */
.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
}

Note : Un élément peut avoir plusieurs classes (ex: <button class="btn btn-primary">). Les styles de toutes les classes appliquées à cet élément seront fusionnés.

C. Sélecteurs d'ID

Un sélecteur d'ID cible un élément HTML spécifique et unique dans toute la page. Un ID doit être utilisé une seule fois par page HTML.

  • Syntaxe : Un dièse # suivi du nom de l'ID. Le nom de l'ID est défini via l'attribut id en HTML.
  • Exemples : #main-header, #footer, #logo.
<!-- HTML -->
<header id="main-header">
  <h1>Mon Site Web</h1>
</header>
<section id="about">
  <p>À propos de notre entreprise.</p>
</section>

/* CSS */
/* Cible l'élément avec l'ID 'main-header' */
#main-header {
  background-color: #f8f8f8;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

/* Cible l'élément avec l'ID 'about' */
#about {
  margin-top: 30px;
  border: 1px solid lightgray;
  padding: 20px;
}

Note : Étant donné que les IDs sont uniques, ils sont souvent utilisés pour les éléments de mise en page principaux ou pour des ciblages JavaScript spécifiques.

D. Sélecteur Universel

Le sélecteur universel * cible tous les éléments HTML de la page. Il est utile pour réinitialiser les styles ou appliquer un style de base à l'ensemble du document.

  • Syntaxe : *
/* Applique cette règle à TOUS les éléments */
* {
  box-sizing: border-box; /* Un reset très courant et utile */
  margin: 0;
  padding: 0;
}

E. Sélecteurs Descendants

Ces sélecteurs vous permettent de cibler un élément qui est un descendant (enfant, petit-enfant, etc.) d'un autre élément.

  • Syntaxe : sélecteur_parent sélecteur_enfant (séparés par un espace).
<!-- HTML -->
<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Produits</a></li>
  </ul>
</nav>

/* CSS */
/* Cible tous les liens 'a' qui sont DANS un élément 'li' qui est DANS un élément 'ul' qui est DANS un élément 'nav' */
nav ul li a {
  text-decoration: none;
  color: #007bff;
}

/* Cible tous les paragraphes qui sont DANS un élément avec la classe 'footer' */
.footer p {
  font-size: 0.9em;
  color: #666;
}

F. Combiner les Sélecteurs

Vous pouvez combiner les sélecteurs pour des ciblages encore plus précis :

  • Sélecteurs multiples (liste) : Appliquer les mêmes styles à plusieurs sélecteurs en les séparant par une virgule ,.
    • Exemple : h1, h2, h3 { font-family: sans-serif; }
  • Sélecteur de type et de classe : Cibler un type d'élément spécifique qui a également une certaine classe.
    • Exemple : p.highlight { background-color: yellow; } (cible les paragraphes uniquement avec la classe highlight).
/* Applique le style aux h1, h2 ET aux éléments avec la classe 'special-text' */
h1, h2, .special-text {
  margin-bottom: 15px;
}

/* Cible uniquement les liens 'a' qui ont la classe 'external' */
a.external {
  color: green;
  font-weight: bold;
}

III. Les Propriétés CSS : Ce que l'on Modifie

Une fois que vous avez ciblé vos éléments avec un sélecteur, les propriétés CSS définissent quoi styliser. Il existe des centaines de propriétés CSS, chacune contrôlant un aspect différent de la présentation d'un élément.

Voici quelques catégories et exemples de propriétés très courantes :

A. Propriétés de Texte et de Police

  • color: Définit la couleur du texte.
  • font-family: Définit la police de caractères (ex: Arial, sans-serif).
  • font-size: Définit la taille de la police (ex: 16px, 1.2em).
  • font-weight: Définit l'épaisseur de la police (ex: bold, 700, normal).
  • text-align: Aligne le texte (ex: left, center, right, justify).
  • text-decoration: Ajoute des décorations au texte (ex: none, underline, line-through).
  • line-height: Définit la hauteur de ligne.

B. Propriétés de Fond (Background)

  • background-color: Définit la couleur de fond de l'élément.
  • background-image: Définit une image de fond.
  • background-repeat: Contrôle la répétition de l'image de fond.
  • background-position: Positionne l'image de fond.

C. Propriétés de Boîte (Box Model)

Le modèle de boîte CSS est fondamental pour la mise en page. Chaque élément HTML est traité comme une boîte rectangulaire.

  • width: Définit la largeur de l'élément.
  • height: Définit la hauteur de l'élément.
  • padding: Définit l'espace entre le contenu de l'élément et sa bordure.
    • padding-top, padding-right, padding-bottom, padding-left pour les côtés individuels.
  • border: Définit l'épaisseur, le style et la couleur de la bordure de l'élément.
    • border-width, border-style, border-color.
  • margin: Définit l'espace autour de l'élément, à l'extérieur de sa bordure.
    • margin-top, margin-right, margin-bottom, margin-left pour les côtés individuels.

D. Propriétés d'Affichage (Display)

  • display: Définit comment un élément est affiché. Les valeurs courantes incluent block, inline, inline-block, flex, grid, none.
    • block : L'élément prend toute la largeur disponible et commence sur une nouvelle ligne (ex: div, p, h1).
    • inline : L'élément prend seulement la largeur de son contenu et ne commence pas sur une nouvelle ligne (ex: span, a). On ne peut pas lui donner de width ou height.
    • inline-block : Combine les caractéristiques des deux. Il se comporte comme un élément inline mais accepte des propriétés de boîte comme width, height, padding, margin.

IV. Les Valeurs CSS : Comment Appliquer les Styles

Les valeurs spécifient la manière dont une propriété est stylisée. Le type de valeur dépend de la propriété.

A. Mots-clés

Beaucoup de propriétés acceptent des mots-clés prédéfinis.

  • Exemples : red, blue, center, bold, none, solid, block, italic.
h1 {
  text-align: center; /* Valeur : mot-clé */
  font-weight: bold;  /* Valeur : mot-clé */
}
a {
  text-decoration: none; /* Valeur : mot-clé */
}

B. Unités de Longueur

Utilisées pour définir les tailles, marges, rembourrages, etc.

  • Unités Absolues (physiquement fixes, dépendent du périphérique de sortie) :
    • px (pixels) : L'unité la plus courante pour les écrans.
    • pt (points) : Courant en impression.
  • Unités Relatives (se basent sur d'autres mesures) :
    • em : Relative à la taille de police de l'élément parent.
    • rem : Relative à la taille de police de l'élément racine (<html>). Plus prévisible que em.
    • % (pourcentage) : Relative à la taille de l'élément parent ou de l'écran.
    • vw (viewport width) : 1% de la largeur de la fenêtre d'affichage.
    • vh (viewport height) : 1% de la hauteur de la fenêtre d'affichage.
.card {
  width: 80%;       /* 80% de la largeur de son parent */
  padding: 1.5em;   /* 1.5 fois la taille de police de l'élément .card */
  margin-bottom: 20px; /* 20 pixels */
}
.title {
  font-size: 2rem;  /* 2 fois la taille de police de l'élément racine (<html>) */
}

C. Valeurs de Couleur

Plusieurs formats pour spécifier les couleurs :

  • Mots-clés : red, blue, green, etc.
  • Hexadécimal : #RRGGBB (ex: #FF0000 pour rouge, #00FF00 pour vert). Peut aussi être #RGB pour des couleurs répétitives (ex: #F00 est FF0000).
  • RGB : rgb(rouge, vert, bleu) (ex: rgb(255, 0, 0) pour rouge). Valeurs de 0 à 255.
  • RGBA : rgba(rouge, vert, bleu, alpha) (ex: rgba(255, 0, 0, 0.5) pour rouge avec 50% d'opacité). alpha est un nombre de 0 (transparent) à 1 (opaque).
  • HSL / HSLA : hsl(teinte, saturation, luminosité) (ex: hsl(0, 100%, 50%) pour rouge). Offre une manière plus intuitive de choisir les couleurs.
body {
  background-color: #f0f0f0; /* Gris très clair en hexadécimal */
}
.primary-text {
  color: rgb(25, 118, 210); /* Bleu vibrant en RGB */
}
.transparent-overlay {
  background-color: rgba(0, 0, 0, 0.7); /* Noir semi-transparent en RGBA */
}

D. Valeurs Numériques

Simples nombres pour certaines propriétés (souvent des multiplicateurs ou des indices).

  • Exemples : font-weight: 700;, opacity: 0.8;, z-index: 10;.

E. Valeurs d'URL

Utilisées pour lier des ressources externes comme des images.

  • Syntaxe : url('chemin/vers/image.jpg')
body {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

V. Commentaires en CSS

Il est essentiel de commenter votre code CSS pour le rendre plus lisible et maintenable, surtout pour les projets complexes ou travaillés en équipe.

  • Syntaxe : Les commentaires en CSS commencent par /* et se terminent par */. Tout ce qui se trouve entre ces délimiteurs est ignoré par le navigateur.
/* Ceci est un commentaire sur une seule ligne */

/*
Ceci est un commentaire
sur plusieurs lignes.
Il explique un bloc de code.
*/

p {
  color: blue; /* Définit la couleur du texte en bleu */
  font-size: 16px;
}

VI. Exemple Pratique Complet

Voici un exemple combinant les sélecteurs, propriétés et valeurs que nous avons appris.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Syntaxe CSS</title>
    <link rel="stylesheet" href="styles.css"> <!-- Liaison vers notre fichier CSS -->
</head>
<body>

    <header id="site-header">
        <h1>Bienvenue sur mon site !</h1>
        <p class="tagline">Apprenez le CSS avec facilité.</p>
    </header>

    <main>
        <section class="card product-card">
            <h2>Produit #1</h2>
            <p>Description du premier produit. Il est <span class="highlight">incroyable</span> !</p>
            <button class="btn primary-btn">Acheter maintenant</button>
        </section>

        <section class="card service-card">
            <h2>Nos Services</h2>
            <p>Découvrez notre gamme de services professionnels.</p>
            <ul>
                <li>Conception web</li>
                <li class="new-service">Développement mobile</li>
                <li>Conseil IT</li>
            </ul>
        </section>

        <article>
            <h3>Un article intéressant</h3>
            <p>Ceci est un paragraphe standard dans un article.</p>
            <p class="warning-text">Attention : Information importante ici.</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2023 Mon Site. Tous droits réservés.</p>
        <a href="#site-header" class="back-to-top">Retour en haut</a>
    </footer>

</body>
</html>

Et le fichier styles.css associé :

/* styles.css */

/* Sélecteur universel et reset de base */
* {
    box-sizing: border-box; /* Inclut padding et border dans la largeur/hauteur totale */
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* Police par défaut pour tout le document */
}

body {
    background-color: #f4f4f4; /* Couleur de fond du corps */
    color: #333; /* Couleur de texte par défaut */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
}

/* Sélecteur d'ID pour l'en-tête principal */
#site-header {
    background-color: #007bff;
    color: white;
    padding: 20px 0;
    text-align: center;
    margin-bottom: 30px;
}

#site-header h1 {
    font-size: 2.8rem; /* Taille de police relative à l'élément racine */
    margin-bottom: 10px;
}

/* Sélecteur de classe pour la ligne de slogan */
.tagline {
    font-style: italic;
    opacity: 0.9;
}

main {
    max-width: 960px; /* Largeur maximale du contenu principal */
    margin: 0 auto; /* Centre le contenu horizontalement */
    padding: 20px;
    display: flex; /* Utilisation de Flexbox pour organiser les sections */
    gap: 20px; /* Espacement entre les éléments flex */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si l'espace manque */
}

/* Sélecteur de classe pour toutes les cartes */
.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 25px;
    flex: 1; /* Permet aux cartes de prendre l'espace disponible */
    min-width: 300px; /* Largeur minimale avant de passer à la ligne */
}

.card h2 {
    color: #007bff;
    margin-bottom: 15px;
}

/* Sélecteur de classe pour un texte spécifique */
.highlight {
    color: orange;
    font-weight: bold;
}

/* Sélecteurs combinés pour les boutons */
.btn {
    display: inline-block; /* Se comporte comme un bloc mais reste sur la ligne */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
}

.primary-btn {
    background-color: #28a745; /* Vert */
    color: white;
}

.primary-btn:hover { /* Pseudo-classe pour l'effet au survol */
    background-color: #218838;
}

/* Sélecteur descendant pour les éléments de liste dans la carte service */
.service-card ul {
    list-style: none; /* Supprime les puces par défaut des listes */
    margin-top: 15px;
}

.service-card li {
    padding: 8px 0;
    border-bottom: 1px dotted #eee;
}

.service-card li:last-child { /* Pseudo-classe pour le dernier élément de liste */
    border-bottom: none;
}

/* Sélecteur de type et de classe combiné */
li.new-service {
    font-weight: bold;
    color: purple;
}

/* Sélecteur de classe pour le texte d'avertissement */
.warning-text {
    background-color: #ffeeba; /* Jaune pâle */
    color: #856404; /* Jaune foncé */
    border: 1px solid #ffc107; /* Bordure jaune */
    padding: 10px;
    margin-top: 20px;
    border-radius: 4px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    position: relative; /* Permet de positionner l'élément "Retour en haut" */
}

/* Sélecteur de classe pour le lien "Retour en haut" */
.back-to-top {
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    position: absolute; /* Positionnement absolu par rapport au footer */
    right: 20px;
    bottom: 20px;
}

Explication du Code :

  • Le fichier index.html structure le contenu avec diverses balises, attributs id et class.
  • Le fichier styles.css applique des styles :
    • Le sélecteur * est utilisé pour un reset de base sur toutes les balises.
    • Des sélecteurs de type (body, h1, ul, li) stylisent les éléments par défaut.
    • Des sélecteurs d'ID (#site-header) appliquent des styles uniques à des zones spécifiques.
    • Des sélecteurs de classe (.tagline, .card, .btn, .primary-btn, .highlight, .warning-text, .back-to-top) sont utilisés pour des composants réutilisables.
    • Des sélecteurs descendants (#site-header h1, .service-card ul, .service-card li) ciblent des éléments enfants spécifiques.
    • Des sélecteurs combinés (li.new-service) affinent le ciblage.
    • Diverses propriétés de texte, fond, boîte (margin, padding, border), et d'affichage (display: flex;) sont utilisées avec des valeurs en mots-clés, pixels, rem, pourcentages, et couleurs (hex, RGB).
    • Des commentaires sont ajoutés pour expliquer certaines parties du CSS.

Conclusion

Félicitations ! Vous avez maintenant une compréhension solide de la syntaxe de base du CSS. Vous savez identifier et écrire :

  • Les sélecteurs : Comment cibler précisément les éléments HTML (par type, classe, ID, ou des combinaisons).
  • Les propriétés : Les aspects visuels et structurels des éléments que vous pouvez modifier (couleur, taille, espacement, etc.).
  • Les valeurs : Les différentes manières de définir ces propriétés (mots-clés, unités de longueur, couleurs).

La maîtrise de ces trois concepts fondamentaux est indispensable pour toute personne souhaitant développer des interfaces web. Le CSS est un langage riche, et de nombreuses autres propriétés, valeurs et types de sélecteurs existent, mais ces bases vous permettront de commencer à styliser vos pages HTML de manière efficace.

N'oubliez pas que la meilleure façon d'apprendre est de pratiquer. Expérimentez avec différents sélecteurs, propriétés et valeurs sur vos propres projets HTML. Le monde du design web vous attend !