Klassenselektor

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

Der Klassen-Selektor wird verwendet, um HTML-Elemente anhand des Werts ihres class-Attributs auszuwählen. Damit kannst du dieselben Stile auf mehrere Elemente in deinem Dokument anwenden. Klassen-Selektoren sind besonders nützlich, wenn du eine Gruppe von Elementen unabhängig von ihren Tag-Namen auf dieselbe Weise gestalten möchtest.

Um Elemente mit einer bestimmten Klasse in deinem CSS auszuwählen, verwendest du einen Punkt (.), gefolgt vom Klassennamen. Hier ist die grundlegende Syntax für die Verwendung eines Klassenselektors:

.classname {
    property: value;
}

Zum Beispiel:

.highlight {
    background-color: yellow;
    color: black;
}

In diesem Beispiel zielt der Klassenselektor .highlight auf alle Elemente mit der Klasse "highlight" ab. Die Deklarationen legen für diese Elemente die Hintergrundfarbe auf Gelb und die Textfarbe auf Schwarz fest.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit verschiedenen Elementen gegeben, darunter Überschriften (<h1>, <h2>), Absätze (<p>) und Bereiche (<div>). Keines davon hat bisher eine class: Füge zuerst die Klassenattribute hinzu und style dann die Elemente mit Klassenselektoren. Folge den Schritten unten:

Füge dem Element <h1> und dem ersten Element <p> ein class-Attribut mit dem Wert "blue-text" hinzu.
Füge dem Element <h2> und dem zweiten Element <p> ein class-Attribut mit dem Wert "large-text" hinzu.
Schreibe eine CSS-Regel mit einem Klassenselektor, der alle Elemente mit der Klasse "blue-text" auswählt. Setze die Textfarbe dieser Elemente auf Blau.
Schreibe eine CSS-Regel mit einem Klassenselektor, der alle Elemente mit der Klasse "large-text" auswählt. Setze die Schriftgröße dieser Elemente auf 24 Pixel.

Probier es selbst

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>