1. Стилизация с помощью CSS

CSS (Cascading Style Sheets) используется для описания внешнего вида и форматирования HTML-документов. Стили могут быть добавлены несколькими способами:

• Внешняя таблица стилей:

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

• Внутренняя таблица стилей:

  <style>
    body {
      background-color: lightblue;
    }
  </style>
  
  

• Встроенные стили:

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

2. Селекторы

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

• Селектор по тегу:

  p {
    color: blue;
  }
  
  

• Селектор по классу:

  .intro {
    font-size: 18px;
  }
  
  

• Селектор по идентификатору:

  #main-title {
    font-weight: bold;
  }
  
  

• Комбинированные селекторы:

  div p {
    margin: 20px;
  }
  
  

• Атрибутные селекторы:

  input[type="text"] {
    border: 1px solid #ccc;
  }
  
  

3. Модель блочной коробки (Box Model)

Модель блочной коробки описывает как элементы HTML рендерятся браузером. Каждый элемент состоит из четырех частей:

• Content: Содержимое элемента, например, текст или изображение.
• Padding: Внутренний отступ, пространство между содержимым и границей.
• Border: Граница вокруг padding и content.
• Margin: Внешний отступ, пространство между границей элемента и другими элементами.

Пример использования Box Model:

div {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}