Программирование

Что такое CSS? class, цвет и flex

Задайте странице цвет, напишите class и поставьте элементы рядом.

Все уроки · Уроки CSS: цвет, class и flex

Что такое CSS

HTML — слова страницы. CSS — их цвет, размер и место. Стиль пишут внутри тега style.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1 { color: #2f6bff; }
      .card {
        background: #101826;
        color: white;
        padding: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Nibras</h1>
    <p class="card">This box has a class.</p>
  </body>
</html>

class и flex

class связывает стиль с именем. Точка означает class: .card. flex ставит элементы рядом.

.row {
  display: flex;
  gap: 12px;
}
.row p {
  background: #1c2740;
  color: white;
  padding: 12px;
}

В HTML это вызывается так: <div class="row"><p>Один</p><p>Два</p></div>.

Вопросы

CSS заменяет HTML? Нет. HTML — структура, CSS — вид.

Зачем class? Чтобы дать один стиль нескольким элементам.

Куда писать color? Внутрь селектора: h1 { color: #2f6bff; }.

Что делает flex? Ставит дочерние элементы в один ряд, рядом.

Автор: Nibras Code