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

Часть раздела Styling with 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". Установите цвет текста этих элементов на blue.
Напишите CSS-правило, используя селектор класса, которое выбирает все элементы с классом "large-text". Установите размер шрифта этих элементов на 24 пикселя.

Шпаргалка

Селектор класса выбирает HTML-элементы на основе значения их атрибута class. Используйте точку (.), за которой следует имя класса:

.classname {
    property: value;
}

Пример:

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

Это выбирает все элементы с class="highlight" и применяет указанные стили.

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

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