Klassenselektor

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

Der Klassenselektor wird verwendet, um HTML-Elemente basierend auf dem Wert ihres class-Attributs auszuwählen. Er ermöglicht es Ihnen, dieselben Stile auf mehrere Elemente in Ihrem Dokument anzuwenden. Klassenselektoren sind besonders nützlich, wenn Sie eine Gruppe von Elementen auf die gleiche Weise formatieren möchten, unabhängig von ihren Tag-Namen.

Um Elemente mit einer bestimmten Klasse in Ihrem CSS anzusprechen, verwenden Sie 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>). Einige dieser Elemente haben ein class-Attribut. Deine Aufgabe besteht darin, Klassenselektoren zu verwenden, um diese Elemente zu formatieren. Befolge die folgenden Schritte:

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