Селектор класса

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 12 из 76.

Селектор класса используется для выбора HTML-элементов на основе значения их атрибута class. Он позволяет применять одни и те же стили к нескольким элементам документа. Селекторы классов особенно полезны, когда нужно одинаково оформить группу элементов независимо от названий их тегов.

Чтобы выбрать элементы с определённым классом в CSS, используй точку (.), за которой следует имя класса. Вот базовый синтаксис использования селектора класса:

.classname {
    property: value;
}

Например:

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

В этом примере селектор класса .highlight выбирает все элементы с классом "highlight". Объявления задают для этих элементов жёлтый цвет фона и чёрный цвет текста.

Задание

Легко

Дан HTML-документ с различными элементами, включая заголовки (<h1>, <h2>), абзацы (<p>) и блоки (<div>). Пока ни у одного из них нет атрибута class: сначала добавь атрибуты классов, а затем стилизуй элементы с помощью селекторов классов. Выполни следующие шаги:

Добавь атрибут class со значением "blue-text" элементу <h1> и первому элементу <p>.
Добавь атрибут class со значением "large-text" элементу <h2> и второму элементу <p>.
Напиши правило CSS с использованием селектора класса, которое выбирает все элементы с классом "blue-text". Задай этим элементам синий цвет текста.
Напиши правило CSS с использованием селектора класса, которое выбирает все элементы с классом "large-text". Задай этим элементам размер шрифта 24 пикселя.

Попробуйте сами

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