CSS — стилизация веб-страниц

<!-- в файле index.html -->
<head>
  <link rel="stylesheet" href="css/style.css">
</head>

<style>
  h1 { color: #2563eb; }
</style>

<p style="color: red;">Красный текст</p>

p { color: #1f2937; }                    /* все абзацы */
.btn { padding: 10px 20px; }             /* по классу */
#logo { width: 40px; }                   /* по id */
input[type="email"] { border: 1px solid; }  /* по атрибуту */

.nav a:hover { color: #2563eb; }         /* :hover */
li:first-child { font-weight: 700; }     /* первый пункт */
.card > .card-title { margin: 0; }      /* прямой потомок */

p {
  color: #2563eb;                  /* hex */
  color: rgb(37, 99, 235);         /* rgb */
  color: rgba(37, 99, 235, 0.7);   /* rgb + прозрачность */
  color: hsl(221, 83%, 53%);       /* hsl */
  color: red;                      /* ключевые слова */
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;               /* от 100 до 900 */
  line-height: 1.6;               /* межстрочный интервал */
  text-align: left;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.card {
  width: 300px;
  padding: 20px;       /* внутренний отступ до контента */
  border: 1px solid #e5e7eb;
  margin: 16px auto;   /* внешний отступ, центрирование */
}

* {
  box-sizing: border-box;
}

/* теперь .card шириной 300px останется 300px, 
   как бы ни менялись padding и border */

.hero {
  background-color: #1e3a8a;
  background-image: url("images/banner.jpg");
  background-size: cover;          /* растянуть и обрезать */
  background-position: center;
  background-repeat: no-repeat;
}

.avatar {
  background: linear-gradient(135deg, #2563eb, #1e3a8a);
}

.btn {
  border-radius: 8px;              /* скругление углов */
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* тень */
}

input:focus {
  outline: 2px solid #2563eb;      /* кольцо вокруг элемента */
}

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
  padding: 22px;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.header-inner {
  display: flex;
  align-items: center;              /* по вертикали */
  justify-content: space-between;   /* кнопки по краям */
  flex-wrap: wrap;                  /* перенос на малом экране */
  gap: 20px;                        /* расстояние между */
}

.menu-item {
  flex-grow: 1;                     /* занимать лишнее место */
}

.actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.actions .btn {
  flex-grow: 0;
  flex-shrink: 1;
}

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;   /* сайдбар + контент */
  gap: 28px;
  align-items: start;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* три равные колонки */
  gap: 16px;
}

.site {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 260px 1fr;
}

.site header { grid-area: header; }
.site aside  { grid-area: sidebar; }
.site main   { grid-area: main; }
.site footer { grid-area: footer; }

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 10;               /* поверх остальных */
}

.card {
  position: relative;        /* станет опорой для badge */
}

.header {
  position: sticky;
  top: 0;                    /* шапка прилипает к верху */
}

.loader {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.btn {
  background: #2563eb;
  transition: background 0.2s, transform 0.2s;
}

.btn:hover {
  background: #1d4ed8;
  transform: scale(1.05);          /* увеличение */
}

.icon {
  transition: transform 0.3s;
}
.icon:hover {
  transform: rotate(90deg);        /* поворот */
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal {
  animation: fade-in 0.4s ease-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.spinner {
  animation: pulse 1.5s infinite;
}

/* базовые стили для мобильных (mobile-first) */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
}

/* планшеты и выше */
@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;    /* сайдбар уходит вверх */
  }
}

img {
  max-width: 100%;       /* картинка не вылезет за блок */
  height: auto;
}

.hero {
  min-height: 100vh;     /* высота экрана */
  width: 80vw;           /* 80% ширины экрана */
}

p {
  font-size: 1rem;       /* относительно базового 16px */
}

.box {
  padding: 1em;          /* относительно текущего шрифта */
}

:root {
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --text: #1f2937;
  --muted: #6b7280;
  --radius: 10px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn:hover {
  background: var(--accent-dark);
}

.nav a:first-child { margin-left: 0; }
.nav a:last-child { margin-right: 0; }
li:nth-child(even) { background: #f1f5f9; }

input:focus {
  border-color: var(--accent);
  outline: none;
}

/* тёмная тема по одному классу */
.dark-theme {
  --text: #f8fafc;
  --accent: #60a5fa;
}

.card-grid {
  container-type: inline-size;
}

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

/* смешиваем единицы */
width: calc(100% - 40px);

/* резиновый шрифт: 16px..24px, 50% от ширины экрана */
font-size: clamp(16px, 4vw, 24px);

/* минимум/максимум из списка */
padding: min(24px, 5vw);
margin-right: max(16px, 2vw);

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f8fafc;
    --accent: #60a5fa;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  transition: transform 0.2s ease;
}

.flip { perspective: 800px; }
.flip:hover { transform: rotateY(180deg); }

.photo {
  width: 100%; height: 300px;
  object-fit: cover;      /* обрезать по центру */
}

<img src="photo-sm.jpg"
     srcset="photo-sm.jpg 480w, photo-lg.jpg 1024w"
     sizes="(max-width: 600px) 100vw, 600px"
     width="600" height="400" alt="Городской пейзаж">

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;   /* текст видим сразу, шрифт подменится */
}
body { font-family: 'MyFont', system-ui, sans-serif; }

/* :is() — специфику берёт самый "весомый" из списка */
:is(h1, h2, .title) { margin-top: 1.5em; }

/* :where() — специфика всегда нулевая, легко переопределить */
:where(article, aside) p { line-height: 1.6; }

/* :has() — родитель, если внутри что-то есть */
.card:has(img) { padding: 0; }

@keyframes fadeUp { from { opacity: 0; } to { opacity: 1; } }
.card { animation: fadeUp linear both; animation-timeline: view(); }

@layer reset, base, components, utilities;
@layer base { h2 { margin-block: 1em; } }
@layer components { .card h2 { margin-block: 0.5em; } }

.feed-item { content-visibility: auto; contain-intrinsic-size: 400px; }
.will-anim { will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

card            /* блок */
card__title     /* элемент блока */
card__price     /* элемент блока */
card--featured  /* модификатор блока */
card__title--big /* модификатор элемента */

<div class="card card--featured">
  <h3 class="card__title card__title--big">Премиум</h3>
  <p class="card__price">990 ₽/мес</p>
</div>

.card { border: 1px solid #e5e7eb; padding: 20px; }
.card--featured { border-color: var(--accent); }
.card__title { font-size: 1.2rem; }
.card__price { color: var(--text-muted); }

/* вместо margin-left / margin-right */
margin-inline: auto;              /* inline — горизонталь, block — вертикаль */
padding-block: 12px;
inset-inline-start: 16px;         /* аналог left */
text-align: start;                /* аналог left, но уважает направление */
border-inline-end: 2px solid;     /* граница «в конце строки» */

.carousel {
  scroll-snap-type: x mandatory;   /* примагнитить при прокрутке */
  overflow-x: auto;
}
.carousel .slide { scroll-snap-align: start; }

.video { aspect-ratio: 16 / 9; }     /* блок не «прыгает» */
img.gray { filter: grayscale(1); }
img.gray:hover { filter: none; }

.banner { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
input[type="checkbox"] { accent-color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav a:not(:last-child) { margin-right: 12px; }
::selection { background: var(--accent-light); }
li::marker { color: var(--accent); }

css/
├── base/      /* переменные, сброс, типографика из ;root */
├── layout/    /* header, footer, netki, контейнеры */
├── components/ /* переиспользуемые блоки: buttons, cards */
├── pages/     /* только страницеспецифичные правила */
└── utils/     /* хелперы: .visually-hidden, .text-muted */

/* components/buttons.css */
/* ===== Кнопки ===== */
.btn { display: inline-block; padding: 10px 22px; border-radius: 8px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--ghost { background: transparent; border: 1px solid var(--accent); }