CSS: Классы

Основное решение для стилизации конкретного участка страницы — использование классов. Они помогают задать нужный нам стиль не разом для всех элементов на странице, а только для тех элементов, у которых указан необходимый класс.

Чтобы задать стиль для класса в CSS используется селектор .название-класса. Обратите внимание на точку — именно так браузер понимает, что данный стиль указывается для класса.

<p class="paragraph">
  The text of our paragraph.
  It's the paragraph class in CSS that
  will set properties for this block of text.
</p>

.paragraph {
  color: #333333;
  /*
    The color property sets the color of the text.
    In this case, it is gray with a value of #333333
  */
}

Так как классов с одинаковым именем на странице может быть много, то это правило сработает для всех элементов, у которых атрибут класс равен paragraph.

Result of styling a paragraph by class

Задание

В редакторе добавьте параграф с классом news и укажите для него цвет текста #553333. Стили подключите с помощью тега <style>.

Коммерческий опыт и Трудоустройство

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

В моей среде код работает, а здесь нет 🤨

Мой код отличается от решения учителя 🤔

Прочитал урок — ничего не понятно 🙄

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

const { test } = require('tests');

test(({ query, expect }) => {
  const element = query(document, 'p');
  expect(element).to.have.class('news');
  const style = getComputedStyle(element);
  // NOTE: Почему-то тест с #55333 значением не работает и требуется rgb
  // AssertionError: expected { Object (0, 1, ...) } to have property 'color' of '#553333', but got 'rgb(85, 51, 51)'
  expect(style).to.have.property('color', 'rgb(85, 51, 51)');
});

← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

← ПредыдущийСледующий →