После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

Как подключить CSS к HTML

Есть несколько способов использования CSS внутри HTML:

Внутренний CSS: внутри раздела <head> HTML-документа, в теге <style>:

<style>
  p { 
    color: blue; 
  }
</style>

Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента <link>:

<link rel="stylesheet" href="styles.css">

Инлайновые стили: непосредственно в HTML-элементе, через атрибут style. Но это не очень хороший способ, лучше его не использовать, и вот почему.

<p style="color: red;">Этот текст будет красного цвета.</p>

Основы синтаксиса CSS

CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.

/* Селектор */
p {
  /* Свойство : Значение; */
  color: green;
  font-size: 14px;
}

Работа с цветом и фоном

Одни из самых основных свойств в CSS — это цвет и фон элементов.

color меняет цвет текста:

p { 
  color: #ff4500; /* Оранжевый цвет текста */
}

background-color меняет фоновый цвет элемента:

p {
  background-color: #eee; /* Светло-серый фон */
}

Типографика и шрифты

CSS позволяет нам контролировать шрифты на странице:

  • font-family задаёт шрифт текста, даже если он нестандартный.
  • font-size определяет размер текста.
  • font-weight устанавливает жирность шрифта.
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
}

Блочная модель

Важной концепцией в CSS является блочная модель, которая включает в себя margin, border, padding, и content.

p {
  margin: 20px;      /* Внешний отступ */
  border: 1px solid; /* Граница */
  padding: 10px;     /* Внутренний отступ */
  /* Содержимое */
}

Внутренние и внешние отступы одной картинкой:

Позиционирование и Flexbox

Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.

.container {
  display: flex; /* Применяем Flexbox */
  justify-content: center; /* Центрирование содержимого по горизонтали */
  align-items: center; /* Центрирование содержимого по вертикали */
}

Адаптивный дизайн

С помощью медиа-запросов мы можем создавать адаптивный дизайн, чтобы наш сайт хорошо выглядел на разных устройствах.

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! 🎨👨‍💻