Bordures

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 36 sur 76.

En CSS, une bordure est une ligne qui entoure un élément, le séparant des autres éléments et définissant ses limites.

Voici la syntaxe de base pour utiliser la propriété border :

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width : L'épaisseur de la bordure, qui peut être spécifiée en pixels (px), ems (em) ou d'autres unités CSS valides. Vous pouvez également utiliser des mots-clés comme thin, medium et thick.

border-style: Le style de la bordure, qui peut être l'un des suivants :
- dotted: Une série de points
- dashed: Une série de tirets
- solid: Une ligne continue
- double: Deux lignes continues

border-color : la couleur de la bordure, qui peut être spécifiée à l'aide de noms de couleurs, de valeurs hexadécimales, de valeurs RGB ou de valeurs HSL.

Vous pouvez également utiliser la notation abrégée pour définir les trois propriétés de bordure à la fois :

selector {
    border: width style color;
}

Par exemple :

p {
    border: 2px solid blue;
}

Dans cet exemple, tous les éléments <p> (paragraphe) ont une bordure bleue continue d'une largeur de 2px.

Défi

Facile

On vous donne un document HTML avec trois éléments <div>, chacun représentant le programme d’un cinéma pour vendredi, samedi et dimanche. Votre tâche consiste à utiliser la propriété border pour les mettre en forme.

Mettre en forme le programme du vendredi avec une bordure noire unie de 3px.
Mettre en forme le programme du samedi avec une bordure bleue en tirets de 4px.
Mettre en forme le programme du dimanche avec une bordure verte en pointillés de 5px.

Essayez vous-même

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>