Rahmen

Teil des Abschnitts Styling mit CSS der HTML-Journey von Coddy. Lektion 36 von 76.

In CSS ist ein Rahmen eine Linie, die ein Element umgibt, es von anderen Elementen trennt und seine Grenzen definiert.

Hier ist die grundlegende Syntax für die Verwendung der border-Eigenschaft:

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

border-width: Die Dicke des Rahmens, die in Pixeln (px), Ems (em) oder anderen gültigen CSS-Einheiten angegeben werden kann. Sie können auch Schlüsselwörter wie thin, medium und thick verwenden.

border-style: Der Stil des Rahmens, der einer der folgenden sein kann:
- dotted: Eine Reihe von Punkten
- dashed: Eine Reihe von Strichen
- solid: Eine durchgehende Linie
- double: Zwei durchgehende Linien

border-color: Die Farbe des Rahmens, die mit benannten Farben, Hexadezimalwerten, RGB-Werten oder HSL-Werten angegeben werden kann.

Sie können auch die Kurzschreibweise verwenden, um alle drei Rahmen-Eigenschaften gleichzeitig festzulegen:

selector {
    border: width style color;
}

Zum Beispiel:

p {
    border: 2px solid blue;
}

In diesem Beispiel haben alle <p> (Absatz-)Elemente einen durchgehenden blauen Rahmen mit einer Breite von 2px.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit drei <div>-Elementen gegeben, die jeweils den Kinospielplan für Freitag, Samstag und Sonntag darstellen. Deine Aufgabe ist es, sie mithilfe der border-Eigenschaft zu gestalten.

Gestalte den Spielplan für Freitag mit einem 3px solid black-Rahmen.
Gestalte den Spielplan für Samstag mit einem 4px dashed blue-Rahmen.
Gestalte den Spielplan für Sonntag mit einem 5px dotted green-Rahmen.

Probier es selbst

<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>