CSS: внешний вид

HTML говорит, что на странице есть заголовок и кнопка. CSS говорит, как они выглядят: какого цвета, каким шрифтом, с какими отступами и где именно стоят. Один и тот же HTML с разным CSS выглядит совершенно по-разному.

Селекторы и свойства

В CSS всего две идеи. Селектор - это «к чему применяем». Свойство - это «что меняем» и на какое значение.

Например: возьми все заголовки h1 (это селектор) и сделай их цвет синим, а размер крупнее (это свойства). Всё CSS - это длинный список таких правил.

Что обычно настраивают

Короткий пример

Вот пара правил. Слева - селектор (к чему), в фигурных скобках - свойства (что меняем):

h1 {
  color: #1a73e8;
  font-size: 32px;
}

button {
  background: #1a73e8;
  color: white;
  padding: 12px 20px;
}

Читается просто: заголовки h1 становятся синими и крупными; у кнопок синий фон, белый текст и внутренний отступ, чтобы они не были впритык к буквам. Меняешь значение - меняется вид.

Адаптивность простыми словами

Сайт открывают и с большого монитора, и с телефона. Адаптивность - это когда страница подстраивается под размер экрана: на широком - в несколько колонок, на узком - всё в один столбец, шрифт чуть крупнее, кнопки на всю ширину.

Делается это тоже через CSS: «если экран узкий - примени вот эти правила». Современные сайты адаптивны по умолчанию, и ИИ обычно сразу собирает их такими.