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

Couleurs, typographie, arrière-plan et bordures en CSS

Introduction

Bienvenue dans cette leçon dédiée aux fondamentaux du stylisme web avec CSS (Cascading Style Sheets). Après avoir appris à structurer le contenu de vos pages avec HTML, il est temps de donner vie à vos créations en les rendant visuellement attrayantes. CSS est le langage qui vous permet de contrôler l'apparence de chaque élément HTML : les couleurs des textes et des fonds, la taille et le style des polices, les images d'arrière-plan, et la manière dont les bordures encadrent vos contenus.

Maîtriser ces propriétés est essentiel pour créer des interfaces utilisateur agréables et fonctionnelles. Cette leçon vous guidera à travers les concepts clés et les propriétés CSS les plus courantes pour manipuler les couleurs, la typographie, les arrière-plans et les bordures.

1. Les Couleurs en CSS

Les couleurs sont omniprésentes sur le web et essentielles pour l'esthétique et la lisibilité. En CSS, vous pouvez définir la couleur du texte (color) et la couleur d'arrière-plan (background-color).

1.1. Propriété color (Couleur du texte)

La propriété color est utilisée pour définir la couleur du texte d'un élément.

p {
  color: blue; /* Définit le texte du paragraphe en bleu */
}

1.2. Propriété background-color (Couleur d'arrière-plan)

La propriété background-color est utilisée pour définir la couleur de fond d'un élément.

div {
  background-color: lightgray; /* Définit l'arrière-plan de la div en gris clair */
}

1.3. Les formats de couleurs

CSS offre plusieurs façons de spécifier une couleur. Chacune a ses avantages :

  • Noms de couleurs prédéfinis : Les plus simples, mais limités. Environ 140 noms sont reconnus (ex: red, blue, green, black, white, gold, tomato, skyblue).

    • Exemple : color: tomato;

  • Hexadécimal (HEX) : Un format très courant. Il s'agit d'une valeur à 6 chiffres (0-9, A-F) précédée d'un #. Chaque paire de chiffres représente une composante RVB (Rouge, Vert, Bleu) sur 255. FF est la valeur maximale, 00 la minimale.

    • #RRGGBB (ex: #FF0000 pour le rouge, #00FF00 pour le vert, #0000FF pour le bleu).
    • Une version courte existe si les paires sont identiques : #RGB (ex: #F00 pour #FF0000).
    • Exemple : color: #336699;

  • RGB (Red, Green, Blue) : Spécifie la couleur en utilisant les valeurs d'intensité du rouge, du vert et du bleu, chacune allant de 0 à 255.

    • Syntaxe : rgb(rouge, vert, bleu)
    • Exemple : color: rgb(255, 0, 0); (rouge pur)

  • RGBA (Red, Green, Blue, Alpha) : Similaire à RGB, mais ajoute un canal alpha pour l'opacité. La valeur alpha est un nombre entre 0 (complètement transparent) et 1 (complètement opaque). Des valeurs comme 0.5 représentent 50% d'opacité.

    • Syntaxe : rgba(rouge, vert, bleu, alpha)
    • Exemple : background-color: rgba(0, 0, 0, 0.7); (noir semi-transparent)

  • HSL (Hue, Saturation, Lightness) : Représente les couleurs d'une manière plus intuitive pour les humains.

    • Hue (Teinte) : Un degré sur la roue chromatique (0-360). 0=rouge, 120=vert, 240=bleu.
    • Saturation : Le degré de "pureté" de la couleur (0% à 100%). 0% est gris, 100% est la couleur pure.
    • Lightness (Luminosité) : La clarté ou l'obscurité de la couleur (0% à 100%). 0% est noir, 100% est blanc, 50% est la couleur "normale".
    • Syntaxe : hsl(teinte, saturation%, luminosité%)
    • Exemple : color: hsl(240, 100%, 50%); (bleu pur)

  • HSLA (Hue, Saturation, Lightness, Alpha) : HSL avec un canal alpha pour l'opacité.

    • Syntaxe : hsla(teinte, saturation%, luminosité%, alpha)
    • Exemple : background-color: hsla(0, 100%, 50%, 0.3); (rouge très transparent)
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Couleurs CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .boite {
            margin-bottom: 10px;
            padding: 15px;
            border: 1px solid #ccc;
        }
        .nommee {
            color: purple; /* Nom de couleur */
            background-color: lightgoldenrodyellow;
        }
        .hex {
            color: #336699; /* Hexadécimal */
            background-color: #F0F8FF;
        }
        .rgb {
            color: rgb(200, 50, 20); /* RGB */
            background-color: rgb(240, 248, 255);
        }
        .rgba {
            color: rgba(255, 0, 0, 0.8); /* RGBA (rouge 80% opaque) */
            background-color: rgba(0, 128, 0, 0.2); /* Vert 20% opaque */
        }
        .hsl {
            color: hsl(270, 70%, 40%); /* HSL (violet foncé) */
            background-color: hsl(60, 100%, 90%);
        }
        .hsla {
            color: hsla(200, 80%, 30%, 0.9); /* HSLA (bleu-vert foncé 90% opaque) */
            background-color: hsla(0, 0%, 50%, 0.4); /* Gris 40% opaque */
        }
    </style>
</head>
<body>
    <h1>Exemple de Couleurs en CSS</h1>

    <div class="boite nommee">
        <p>Ce texte est <span style="font-weight: bold;">violet</span> et l'arrière-plan est <span style="font-weight: bold;">lightgoldenrodyellow</span> (Noms de couleurs).</p>
    </div>

    <div class="boite hex">
        <p>Ce texte utilise le format <span style="font-weight: bold;">hexadécimal (#336699)</span> et l'arrière-plan <span style="font-weight: bold;">#F0F8FF</span>.</p>
    </div>

    <div class="boite rgb">
        <p>Ce texte utilise le format <span style="font-weight: bold;">RGB (200, 50, 20)</span> et l'arrière-plan <span style="font-weight: bold;">RGB (240, 248, 255)</span>.</p>
    </div>

    <div class="boite rgba">
        <p>Ce texte utilise le format <span style="font-weight: bold;">RGBA (255, 0, 0, 0.8)</span> et l'arrière-plan <span style="font-weight: bold;">RGBA (0, 128, 0, 0.2)</span>, montrant l'opacité.</p>
    </div>

    <div class="boite hsl">
        <p>Ce texte utilise le format <span style="font-weight: bold;">HSL (270, 70%, 40%)</span> et l'arrière-plan <span style="font-weight: bold;">HSL (60, 100%, 90%)</span>.</p>
    </div>

    <div class="boite hsla">
        <p>Ce texte utilise le format <span style="font-weight: bold;">HSLA (200, 80%, 30%, 0.9)</span> et l'arrière-plan <span style="font-weight: bold;">HSLA (0, 0%, 50%, 0.4)</span>, avec opacité.</p>
    </div>
</body>
</html>

Explication du code : Ce code HTML contient plusieurs div avec des classes différentes. Chaque classe applique des styles CSS pour color et background-color en utilisant un format de couleur distinct (nommé, hexadécimal, RGB, RGBA, HSL, HSLA). Cela permet de visualiser directement l'effet de chaque format et de comprendre l'utilisation du canal alpha pour la transparence.

2. La Typographie en CSS

La typographie est cruciale pour la lisibilité et l'esthétique de votre contenu textuel. CSS offre un contrôle précis sur l'apparence des polices.

2.1. font-family (Famille de police)

Définit la police de caractères à utiliser pour le texte. Il est recommandé de fournir plusieurs polices en liste séparée par des virgules, finissant par une police générique. Le navigateur utilisera la première police disponible sur le système de l'utilisateur.

  • Polices spécifiques : Arial, Times New Roman, Verdana, etc. Si le nom de la police contient des espaces, utilisez des guillemets.
  • Polices génériques : serif (avec empattements, ex: Times), sans-serif (sans empattements, ex: Arial), monospace (largeur fixe, ex: Courier), cursive (écriture manuscrite), fantasy (décorative).
p {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

2.2. font-size (Taille de la police)

Définit la taille du texte.

  • Unités absolues :
    • px (pixels) : Taille fixe, pas de mise à l'échelle. Utile pour des éléments spécifiques mais moins flexible pour l'accessibilité.
    • pt (points) : Principalement utilisé en impression.
  • Unités relatives :
    • em : Relative à la taille de police de l'élément parent. 1em est égal à la taille de police de l'élément parent.
    • rem (root em) : Relative à la taille de police de l'élément racine (<html>). Plus prévisible que em car elle ne s'accumule pas.
    • % (pourcentage) : Relative à la taille de police de l'élément parent.
    • vw (viewport width) : 1% de la largeur du viewport (fenêtre d'affichage).
    • vh (viewport height) : 1% de la hauteur du viewport.
    • vmin, vmax : Le minimum/maximum de vw et vh.
  • Mots-clés : small, medium, large, etc.
h1 {
  font-size: 2.5rem; /* 2.5 fois la taille de police de l'élément racine */
}
p {
  font-size: 16px; /* 16 pixels */
}

Il est généralement recommandé d'utiliser des unités relatives (em, rem, %) pour font-size afin de garantir une meilleure adaptabilité et accessibilité.

2.3. font-weight (Poids de la police)

Définit l'épaisseur ou la "graisse" des caractères.

  • Mots-clés : normal (équivaut à 400), bold (équivaut à 700).
  • Valeurs numériques : De 100 (le plus léger) à 900 (le plus gras), par multiples de 100. Les polices doivent supporter ces poids pour qu'ils aient un effet.
strong {
  font-weight: bold;
}
.titre-leger {
  font-weight: 300;
}

2.4. font-style (Style de la police)

Définit si le texte doit être normal, italique ou oblique.

  • normal
  • italic : Utilisez la version italique de la police (si disponible).
  • oblique : Incline le texte si la version italique n'est pas disponible.
em {
  font-style: italic;
}

2.5. text-align (Alignement du texte)

Définit l'alignement horizontal du texte à l'intérieur de l'élément bloc.

  • left (gauche, par défaut)
  • right (droite)
  • center (centré)
  • justify (justifié, aligne le texte des deux côtés en ajustant l'espacement entre les mots)
.centre {
  text-align: center;
}

2.6. line-height (Hauteur de ligne)

Définit la hauteur de chaque ligne de texte. Essentiel pour la lisibilité.

  • Peut être une longueur (px, em, rem), un pourcentage, ou un nombre pur (recommandé pour une meilleure adaptabilité). Un nombre pur multiplie la font-size actuelle.
  • Une valeur de 1.5 ou 1.6 est souvent une bonne base pour le corps de texte.
p {
  line-height: 1.6; /* 1.6 fois la taille de la police */
}

2.7. text-decoration (Décoration du texte)

Applique ou supprime des lignes de décoration sur le texte.

  • none : Supprime toute décoration (très courant pour les liens <a> par défaut soulignés).
  • underline : Souligne le texte.
  • overline : Surligne le texte.
  • line-through : Barre le texte.
a {
  text-decoration: none; /* Supprime le soulignement par défaut des liens */
}

2.8. Autres propriétés utiles de typographie

  • letter-spacing : Espacement entre les caractères.
  • word-spacing : Espacement entre les mots.
  • text-transform : Modifie la casse du texte (uppercase, lowercase, capitalize).
  • white-space : Gère les espaces blancs et les retours à la ligne.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Typographie CSS</title>
    <style>
        body {
            font-family: 'Open Sans', Arial, sans-serif; /* Police globale */
            padding: 20px;
            line-height: 1.6; /* Hauteur de ligne par défaut pour le corps */
        }
        h1 {
            font-family: Georgia, serif; /* Police avec empattements pour le titre */
            font-size: 3em; /* Grande taille relative */
            font-weight: bold; /* Gras */
            text-align: center; /* Centré */
            color: #2c3e50; /* Couleur foncée */
            text-transform: uppercase; /* Tout en majuscules */
            letter-spacing: 2px; /* Espacement entre les lettres */
        }
        p {
            font-size: 1.1rem; /* Taille de paragraphe légèrement plus grande */
            color: #34495e;
            margin-bottom: 1em;
        }
        .intro-italic {
            font-style: italic; /* Italique */
            font-weight: 300; /* Poids léger */
            color: #7f8c8d;
        }
        .justifie {
            text-align: justify; /* Texte justifié */
            line-height: 1.8; /* Plus grande hauteur de ligne pour lisibilité */
        }
        a {
            color: #3498db; /* Couleur de lien */
            text-decoration: none; /* Pas de soulignement */
            font-weight: bold;
        }
        a:hover {
            text-decoration: underline; /* Souligne au survol */
        }
        .barre {
            text-decoration: line-through; /* Texte barré */
            color: #e74c3c;
        }
        .petit-texte {
            font-size: 0.8em; /* Plus petit que le parent */
            color: #95a5a6;
        }
    </style>
</head>
<body>
    <h1>L'art de la typographie web</h1>

    <p class="intro-italic">"La typographie est l'architecture du texte. C'est l'harmonie visuelle qui rend la lecture agréable et efficace."</p>

    <p>
        En design web, la typographie ne se limite pas au choix d'une police. C'est un ensemble de décisions qui influencent grandement l'expérience utilisateur. La <code>font-family</code>, la <code>font-size</code>, le <code>font-weight</code> et le <code>font-style</code> sont les bases.
    </p>

    <p class="justifie">
        Un texte bien aligné avec <code>text-align: justify;</code> peut donner un aspect professionnel, mais attention à ne pas créer trop d'espaces blancs inégaux (des "rivières") dans les blocs étroits. La <code>line-height</code>, ou interligne, est essentielle pour la lisibilité, surtout pour de longs paragraphes. Une valeur entre 1.5 et 1.8 est souvent recommandée.
    </p>

    <p>
        Les liens <a href="#">interactifs</a> sont souvent mis en valeur par un changement de <code>text-decoration</code> au survol, comme un simple soulignement. Parfois, un texte peut être <span class="barre">obsolète ou supprimé</span>, ce qui est indiqué par <code>text-decoration: line-through;</code>.
    </p>

    <p class="petit-texte">Ce petit texte utilise une taille de police relative (0.8em) et un espacement de lettres fin.</p>

</body>
</html>

Explication du code : Cet exemple illustre diverses propriétés typographiques. Le <h1> montre l'utilisation de font-family, font-size (en em), font-weight, text-align, text-transform et letter-spacing. Les paragraphes varient en font-style, font-size (en rem et em), text-align et line-height. Les liens <a> démontrent comment retirer le soulignement par défaut et le réintroduire au hover, tandis qu'une classe .barre utilise text-decoration: line-through.

3. Les Arrière-plans en CSS

Au-delà d'une simple couleur, les arrière-plans peuvent être enrichis d'images, de dégradés et de motifs pour créer des ambiances visuelles complexes.

3.1. background-color (Rappel)

Comme vu précédemment, définit la couleur de fond.

3.2. background-image (Image d'arrière-plan)

Applique une ou plusieurs images en arrière-plan d'un élément.

  • Utilise la fonction url() pour spécifier le chemin de l'image.
body {
  background-image: url('images/fond.png');
}

3.3. background-repeat (Répétition de l'image)

Contrôle comment une image d'arrière-plan est répétée.

  • repeat (par défaut) : Répète l'image horizontalement et verticalement.
  • repeat-x : Répète horizontalement seulement.
  • repeat-y : Répète verticalement seulement.
  • no-repeat : L'image apparaît une seule fois.
  • space : Répète l'image autant de fois que possible sans la couper, en distribuant l'espace restant entre les images.
  • round : Répète l'image autant de fois que possible, en l'étirant ou la compressant pour éviter les espaces.
.motif {
  background-image: url('images/motif.png');
  background-repeat: repeat-x;
}

3.4. background-position (Position de l'image)

Définit la position initiale d'une image d'arrière-plan.

  • Mots-clés : top, bottom, left, right, center.
  • Pourcentages : Ex: 50% 50% pour le centre.
  • Longueurs : Ex: 10px 20px.
  • Peut prendre une ou deux valeurs (horizontale verticale). Si une seule, la verticale est center.
.hero {
  background-image: url('images/hero.jpg');
  background-repeat: no-repeat;
  background-position: center center; /* Centre l'image */
}

3.5. background-size (Taille de l'image)

Définit la taille de l'image d'arrière-plan.

  • auto (par défaut) : Taille réelle de l'image.
  • cover : L'image est redimensionnée pour couvrir toute la zone d'arrière-plan, même si cela la coupe.
  • contain : L'image est redimensionnée pour être entièrement visible dans la zone d'arrière-plan, en conservant ses proportions. Peut laisser des espaces.
  • Longueurs ou pourcentages : Ex: background-size: 100% auto; (pleine largeur, hauteur auto).
html {
  background-image: url('images/grand_fond.jpg');
  background-size: cover; /* L'image couvre tout l'arrière-plan */
}

3.6. background-attachment (Attachement de l'arrière-plan)

Définit si l'image d'arrière-plan défile avec le contenu ou reste fixe.

  • scroll (par défaut) : L'image défile avec le contenu.
  • fixed : L'image reste fixe par rapport à la fenêtre d'affichage, même si le contenu défile.
  • local : L'image défile avec le contenu de l'élément (utile pour les éléments avec défilement interne).
body {
  background-image: url('images/parallax.jpg');
  background-attachment: fixed; /* Crée un effet de parallaxe */
}

3.7. Propriété raccourcie background

Vous pouvez combiner toutes les propriétés d'arrière-plan dans une seule propriété background. L'ordre n'est pas strict, mais il est courant de suivre cet ordre pour la lisibilité : background: [color] [image] [repeat] [attachment] [position] / [size]; La propriété size doit être précédée d'un /.

.carte {
  /* couleur   image        répétition position */
  background: #f0f0f0 url('images/icone.png') no-repeat center center;
  /* Optionnel: Si vous voulez background-size, il vient après un / */
  background-size: 50px auto;
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'Arrière-plans CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            /* Propriété background raccourcie pour le corps */
            background: #f4f4f4 url('https://via.placeholder.com/100') repeat top left fixed;
            background-size: 50px 50px; /* Taille de l'image de fond du body */
        }
        .section {
            height: 300px;
            margin: 20px;
            padding: 20px;
            color: white;
            text-align: center;
            font-size: 1.5em;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .section-image-cover {
            background-image: url('https://via.placeholder.com/800x300/2c3e50/ffffff?text=Image%20Cover');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover; /* L'image couvre tout l'élément */
        }
        .section-image-contain {
            background-image: url('https://via.placeholder.com/300x150/e74c3c/ffffff?text=Image%20Contain');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain; /* L'image est entièrement contenue */
            background-color: #f1c40f; /* Couleur de fond derrière l'image */
        }
        .section-repeat-x {
            background-image: url('https://via.placeholder.com/50/3498db/ffffff?text=X');
            background-repeat: repeat-x; /* Répétition horizontale */
            background-position: bottom;
            color: #34495e;
        }
    </style>
</head>
<body>
    <div class="section section-image-cover">
        <p>Arrière-plan avec <code>background-size: cover;</code></p>
    </div>

    <div class="section section-image-contain">
        <p>Arrière-plan avec <code>background-size: contain;</code></p>
    </div>

    <div class="section section-repeat-x">
        <p>Arrière-plan avec <code>background-repeat: repeat-x;</code></p>
    </div>

    <div style="height: 1000px;">
        <!-- Espace pour simuler le défilement et voir l'effet background-attachment: fixed sur le body -->
        <p style="color: #333; text-align: center; margin-top: 500px;">
            Faites défiler pour voir l'arrière-plan du body rester fixe.
        </p>
    </div>
</body>
</html>

Explication du code : Cet exemple montre différentes utilisations des propriétés d'arrière-plan.

  • Le <body> utilise la propriété raccourcie background avec une image de placeholder répétée et un background-attachment: fixed pour créer un effet de parallaxe lorsque vous faites défiler la page.
  • .section-image-cover utilise background-size: cover pour s'assurer que l'image remplit toujours l'élément, la coupant si nécessaire.
  • .section-image-contain utilise background-size: contain pour s'assurer que l'image est entièrement visible à l'intérieur de l'élément, quitte à laisser de l'espace.
  • .section-repeat-x illustre l'utilisation de background-repeat: repeat-x pour répéter une image seulement sur l'axe horizontal.

4. Les Bordures en CSS

Les bordures sont des lignes qui encadrent les éléments, utiles pour séparer visuellement le contenu ou ajouter des effets de style.

4.1. border-width (Épaisseur de la bordure)

Définit l'épaisseur de la bordure.

  • Mots-clés : thin, medium (par défaut), thick.
  • Valeurs numériques : Ex: 1px, 2em.
p {
  border-width: 2px;
}

4.2. border-style (Style de la bordure)

Définit le style de la ligne de bordure. Sans cette propriété, la bordure ne sera pas visible.

  • none : Pas de bordure.
  • hidden : Identique à none pour la plupart des usages, mais se comporte différemment dans les tableaux.
  • dotted : Petits points.
  • dashed : Tirets.
  • solid : Ligne continue (le plus courant).
  • double : Deux lignes solides.
  • groove : Créé un effet 3D "enfoncé".
  • ridge : Créé un effet 3D "relief".
  • inset : Créé un effet 3D "enfoncé" pour l'élément entier.
  • outset : Créé un effet 3D "relief" pour l'élément entier.
div {
  border-style: solid;
}

4.3. border-color (Couleur de la bordure)

Définit la couleur de la bordure, en utilisant n'importe quel format de couleur CSS.

div {
  border-color: #3498db; /* Bleu */
}

4.4. Propriété raccourcie border

Comme pour background, vous pouvez définir l'épaisseur, le style et la couleur d'une bordure en une seule propriété. border: [width] [style] [color]; L'ordre n'est pas important.

.bouton {
  border: 1px solid #2ecc71; /* Une bordure solide de 1px et verte */
}

4.5. Bordures spécifiques

Vous pouvez cibler des côtés spécifiques d'un élément :

  • border-top: pour le haut
  • border-right: pour la droite
  • border-bottom: pour le bas
  • border-left: pour la gauche

Chacune de ces propriétés peut aussi être décomposée (border-top-width, border-top-style, border-top-color).

.carte {
  border-top: 5px dashed orange; /* Bordure supérieure orange pointillée de 5px */
  border-left: 1px solid gray; /* Bordure gauche grise solide de 1px */
}

4.6. border-radius (Coins arrondis)

Cette propriété permet d'arrondir les coins d'un élément, créant des formes plus douces ou des cercles.

  • Une seule valeur : Applique l'arrondi à tous les coins.
    • Ex: border-radius: 10px;
  • Quatre valeurs : Applique l'arrondi à chaque coin dans l'ordre (haut-gauche, haut-droite, bas-droite, bas-gauche).
    • Ex: border-radius: 10px 20px 30px 40px;
  • Formes elliptiques : Vous pouvez spécifier deux rayons pour chaque coin (horizontal, vertical) séparés par un /.
    • Ex: border-radius: 50% / 10%; (créera une forme de pilule)
  • Cercles : Si l'élément est un carré, border-radius: 50%; le transformera en cercle.
.boite-arrondie {
  border-radius: 15px; /* Coins arrondis de 15px */
}
.cercle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Transforme un carré en cercle */
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Bordures CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f8f8f8;
        }
        .boite {
            width: 200px;
            height: 100px;
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            color: #333;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /* Bordures basiques */
        .solide {
            border: 2px solid #3498db; /* Largeur, style, couleur */
        }
        .pointille {
            border: 3px dotted #e74c3c;
        }
        .tiret {
            border: 4px dashed #2ecc71;
        }
        .double {
            border: 6px double #9b59b6;
        }

        /* Bordures spécifiques aux côtés */
        .cotes-differents {
            border-top: 5px solid #f1c40f;
            border-right: 3px dashed #e67e22;
            border-bottom: 2px dotted #1abc9c;
            border-left: 1px solid #34495e;
            height: 120px; /* Ajuster la hauteur pour la visibilité */
        }

        /* Bordures arrondies */
        .arrondi-leger {
            border: 2px solid #5d6d7e;
            border-radius: 8px; /* Tous les coins */
        }
        .arrondi-variable {
            border: 2px solid #c0392b;
            border-radius: 10px 30px 50px 70px; /* Haut-G, Haut-D, Bas-D, Bas-G */
        }
        .cercle {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            border-radius: 50%; /* Transforme en cercle */
            border: none; /* Pas de bordure visible pour ce cercle */
        }
    </style>
</head>
<body>
    <h1>Exemple de Bordures en CSS</h1>

    <div class="boite solide">
        Bordure Solide
    </div>

    <div class="boite pointille">
        Bordure Pointillée
    </div>

    <div class="boite tiret">
        Bordure Tiret
    </div>

    <div class="boite double">
        Bordure Double
    </div>

    <div class="boite cotes-differents">
        Bordures sur Côtés Différents
    </div>

    <h2>Bordures Arrondies</h2>

    <div class="boite arrondi-leger">
        Coins Légèrement Arrondis
    </div>

    <div class="boite arrondi-variable">
        Coins Arrondis Variables
    </div>

    <div class="boite cercle">
        Cercle
    </div>
</body>
</html>

Explication du code : Ce code HTML et CSS démontre une variété de styles de bordures.

  • Les premières div montrent les différents border-style (solid, dotted, dashed, double) en utilisant la propriété raccourcie border.
  • .cotes-differents illustre comment appliquer des styles de bordure uniques à chaque côté d'un élément.
  • Enfin, les exemples arrondi-leger, arrondi-variable et cercle présentent les différentes manières d'utiliser border-radius pour créer des coins arrondis ou des formes circulaires.

Conclusion

Félicitations ! Vous avez exploré les propriétés fondamentales de CSS pour la gestion des couleurs, de la typographie, des arrière-plans et des bordures. Ces outils sont la base de toute conception web visuellement réussie.

  • Les Couleurs vous permettent de définir l'ambiance et la hiérarchie visuelle, avec une grande flexibilité grâce aux différents formats (HEX, RVB, HSL, RGBA, HSLA).
  • La Typographie est cruciale pour la lisibilité et l'identité de votre marque, vous offrant un contrôle précis sur les polices, leurs tailles, poids et styles.
  • Les Arrière-plans transforment de simples fonds en éléments visuels riches, avec la possibilité d'ajouter des images, de contrôler leur répétition, leur position et leur taille.
  • Les Bordures aident à structurer et à mettre en évidence le contenu, avec une variété de styles et la possibilité d'arrondir les coins pour des designs plus doux ou des formes spécifiques.

La clé est la pratique. Expérimentez avec ces propriétés, combinez-les, et observez comment elles transforment l'apparence de vos pages HTML. La maîtrise de ces bases vous ouvrira la porte à des designs de plus en plus complexes et interactifs. Continuez à explorer CSS ; c'est un langage puissant et gratifiant !