Selektor klasy

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 12 z 76.

Selektor klasy służy do wybierania elementów HTML na podstawie wartości ich atrybutu class. Pozwala zastosować te same style do wielu elementów w dokumencie. Selektory klas są szczególnie przydatne, gdy chcesz stylizować grupę elementów w ten sam sposób, niezależnie od ich nazw znaczników.

Aby wybierać elementy z określoną klasą w CSS, użyj kropki (.), a następnie nazwy klasy. Oto podstawowa składnia selektora klasy:

.classname {
    property: value;
}

Na przykład:

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

W tym przykładzie selektor klasy .highlight wybiera wszystkie elementy z klasą „highlight”. Deklaracje ustawiają kolor tła tych elementów na żółty, a kolor tekstu na czarny.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z różnymi elementami, w tym nagłówkami (<h1>, <h2>), akapitami (<p>) i elementami <div>. Niektóre z tych elementów mają atrybut class. Twoim zadaniem jest użycie selektorów klas do stylizacji tych elementów. Wykonaj poniższe kroki:

Dodaj atrybut class o wartości "blue-text" do elementu <h1> i pierwszego elementu <p>.
Dodaj atrybut class o wartości "large-text" do elementu <h2> i drugiego elementu <p>.
Napisz regułę CSS używającą selektora klasy, która wybiera wszystkie elementy z klasą "blue-text". Ustaw kolor tekstu tych elementów na niebieski.
Napisz regułę CSS używającą selektora klasy, która wybiera wszystkie elementy z klasą "large-text". Ustaw rozmiar czcionki tych elementów na 24 piksele.

Spróbuj swoich sił

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