Розділ 2 · Завдання 2

Клас (class)

Коли треба застилізувати не всі елементи, а тільки деякі.

Завдання

Клас — «бирка», яку клеїш на потрібні елементи, а стилізуєш саму бирку. Онови файл:

styles-demo.html

<!DOCTYPE html>
<html>
<head>
  <title>Вчимо CSS</title>
  <style>
    p {
      color: red;
    }

    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</head>
<body>

<p>Цей текст червоний</p>
<p>І цей теж червоний</p>
<p class="highlight">А цей — червоний, з жовтим фоном і жирний</p>
<p>Знову звичайний червоний</p>

</body>
</html>

Як це читати

В HTML: class="highlight" — приліпили бирку на елемент.

В CSS: .highlight { ... } — крапка перед назвою означає «це клас, а не тег».

Порада

Назву класу можна вигадати будь-яку (латиниця, без пробілів). Один клас можна приліпити на кілька різних елементів одразу.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща