Кольори, Шрифти і Стилізація Тексту

З поверненням.

У попередньому уроці ти вивчив CSS selectors.

Тепер ти можеш сказати CSS точно, що потрібно стилізувати.

Дуже потужно.

Дуже небезпечно.

Як дати пензлик людині, яка щойно відкрила для себе gradients.

У цьому уроці ми зосередимось на тексті.

Бо більшість сайтів наповнені текстом.

Заголовки.

Абзаци.

Посилання.

Кнопки.

Повідомлення.

Попередження.

Маленький текст у footer, який ніхто не читає, але юридично всім потрібен.

Якщо текст важко читати, весь сайт здається зламаним.

Навіть якщо layout технічно правильний.

Читабельний текст — це не прикраса.

Читабельний текст — це виживання.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

як використовувати text colors;
як використовувати background colors;
як використовувати font-family;
як змінювати font-size;
як використовувати font-weight;
як покращувати читабельність через line-height;
як вирівнювати текст;
як стилізувати links;
як використовувати text-decoration;
як створити простий читабельний layout для тексту.

Чому Стилізація Тексту Важлива

HTML дає тексту значення.

CSS дає тексту вигляд.

HTML каже:

<h1>Ласкаво просимо на мій сайт</h1>
<p>Це абзац.</p>

CSS каже:

h1 {
  color: #111827;
  font-size: 48px;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

Тепер браузер знає не тільки, що це за контент, але і як він має виглядати.

Хороша стилізація тексту допомагає користувачам читати комфортно.

Погана стилізація тексту змушує користувачів тікати швидше, ніж developer, який бачить “undefined is not a function” у п’ятницю ввечері.

Створи Проєкт

Створи папку для цього уроку:

mkdir css-lesson3
cd css-lesson3
touch index.html
touch style.css

Ти маєш отримати:

css-lesson3/
  index.html
  style.css

Відкрий папку у своєму editor.

Ми створимо маленьку article page.

Бо articles ідеально підходять для практики text styling.

Багато headings.

Багато paragraphs.

Багато можливостей зробити все читабельним.

Або жахливим.

Ми вибираємо читабельність.

Ми цивілізовані люди.

Напиши HTML

Відкрий index.html і додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Кольори, Шрифти і Стилізація Тексту</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Вивчаємо Стилізацію Тексту з CSS</h1>
    <p class="subtitle">Зроби слова читабельними, красивими і трохи менш нудними.</p>
  </header>

  <main class="page">
    <article class="article-card">
      <p class="category">CSS Basics</p>

      <h2>Чому Стилізація Тексту Важлива</h2>

      <p>
        Текст — одна з найважливіших частин будь-якого сайту. Якщо люди не можуть комфортно читати твій контент, вони не залишаться надовго.
      </p>

      <p>
        CSS дозволяє контролювати кольори, шрифти, розміри, відступи, вирівнювання і багато інших деталей, які роблять читання простішим.
      </p>

      <h3>Читабельний Текст — Це Хороший Дизайн</h3>

      <p>
        Хороший дизайн — це не тільки красиві кольори і fancy effects. Це також зрозуміла подача інформації.
      </p>

      <a href="#" class="read-more">Читати більше</a>
    </article>
  </main>

  <footer class="site-footer">
    <p>Створено під час вивчення CSS text styling.</p>
  </footer>
</body>
</html>

Ця сторінка має:

header;
subtitle;
article card;
category label;
headings;
paragraphs;
link;
footer.

Ідеально.

Маленький майданчик для тексту.

Але без піску у взутті.

Почни з Базових Стилів Сторінки

Відкрий style.css і додай:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

Це дає сторінці:

відсутність стандартного browser margin;
простий font;
світлий background;
темний text color.

Сторінка вже виглядає менш хаотично.

Ще не готова.

Але вже не так, ніби браузер приймав усі дизайнерські рішення під час обіду.

Колір Тексту через color

Property color змінює колір тексту.

Приклад:

p {
  color: #374151;
}

Це робить текст paragraph темно-сірим.

Темно-сірий часто легше читати, ніж чистий чорний.

Чистий чорний на чистому білому може виглядати занадто різко.

Ніби сторінка кричить.

Додай це:

p {
  color: #374151;
}

Тепер усі paragraphs використовують м’якший колір тексту.

Маленька зміна.

Великий комфорт.

Очі користувачів тихо дякують тобі.

Background Color

Property background-color змінює фон елемента.

Приклад:

.site-header {
  background-color: #111827;
}

Додай це:

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

Тепер header має:

темний background;
білий text;
centered content;
комфортні відступи.

Це вже виглядає більш свідомо.

CSS починає поводитися нормально.

Повністю не довіряй.

Але прогрес є.

Font Family

Property font-family контролює шрифт.

Приклад:

body {
  font-family: Arial, sans-serif;
}

Це означає:

Використай Arial, якщо він доступний. Якщо ні — використай будь-який sans-serif font.

Fallback важливий.

Не кожен computer має кожен font.

Browsers практичні.

Їм потрібні запасні плани.

Як developers перед production deploy.

Поширені font families:

font-family: Arial, sans-serif;
font-family: Georgia, serif;
font-family: "Courier New", monospace;

Поки що залиш це:

body {
  font-family: Arial, sans-serif;
}

Просто.

Читабельно.

Безпечно.

Не драматично.

Font Weight

Property font-weight контролює товщину тексту.

Приклад:

h1 {
  font-weight: 700;
}

Поширені значення:

font-weight: 400;
font-weight: 600;
font-weight: 700;

Також можна використовувати слова:

font-weight: normal;
font-weight: bold;

Додай це:

h1,
h2,
h3 {
  font-weight: 700;
}

.category {
  font-weight: 700;
}

Тепер headings і category label виглядають сильніше.

Використовуй bold обережно.

Якщо все bold, то нічого не bold.

Якщо кожна кнопка каже “ТЕРМІНОВО”, з часом ніхто не вірить.

Line Height

Property line-height контролює простір між рядками тексту.

Приклад:

p {
  line-height: 1.7;
}

Додай це:

p {
  font-size: 18px;
  line-height: 1.7;
}

Це покращує читабельність.

Без нормального line-height paragraphs виглядають стиснутими.

Ніби слова стоять у переповненому ліфті.

Дай їм простір.

Словам теж потрібен кисень.

Text Align

Property text-align контролює горизонтальне вирівнювання.

Приклад:

text-align: center;

Поширені значення:

text-align: left;
text-align: center;
text-align: right;

Ми вже використали це в header:

.site-header {
  text-align: center;
}

Використовуй centered text обережно.

Він добре працює для коротких headers.

Але довгі paragraphs зазвичай легше читати left-aligned.

Не центруй цілу article, якщо не хочеш, щоб читачі страждали ввічливо.

Text Transform

Property text-transform змінює регістр тексту.

Приклад:

.category {
  text-transform: uppercase;
}

Додай це:

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Це робить category label схожим на маленький tag.

letter-spacing додає простір між літерами.

Корисно для uppercase labels.

Небезпечно, якщо переборщити.

Занадто великий letter-spacing робить текст таким, ніби він намагається втекти.

Text Decoration

Property text-decoration контролює лінії на тексті.

Links за замовчуванням мають underline.

Можна прибрати його:

a {
  text-decoration: none;
}

Але обережно.

Underlines допомагають користувачам розпізнавати links.

Якщо прибираєш underline, зроби link зрозумілим іншим способом.

Додай це:

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

Тепер link виглядає чисто.

Коли user наводить mouse, underline повертається.

Ввічливо.

Читабельно.

Link з хорошими манерами.

Стилізуй Article Card

Тепер зроби article легшим для читання.

Додай це:

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

Це створює:

centered content;
maximum width;
white article card;
internal spacing;
rounded corners.

Тепер сторінка має структуру.

Текст має дім.

Гарний дім.

Не підвал з default Times New Roman.

Стилізуй Footer

Додай:

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Тепер footer виглядає м’якше.

Footer text зазвичай має бути менш домінантним.

Він корисний.

Але йому не потрібно заходити в кімнату з трубою.

Повний CSS

Твій style.css має виглядати так:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

h1,
h2,
h3 {
  font-weight: 700;
}

.subtitle {
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Збережи файл.

Онови браузер.

Сторінка має виглядати значно читабельнішою.

Не просто styled.

Readable.

Це мета.

Сайт має не тільки виглядати “cool”.

Він має допомагати людям розуміти інформацію.

Дика ідея, правда?

Типові Помилки

Занадто Малий Текст

Погано:

p {
  font-size: 10px;
}

Tiny text — це не елегантно.

Це просто tiny.

Основний текст має бути комфортним для читання.

Хороший старт:

p {
  font-size: 16px;
  line-height: 1.6;
}

Для beginner practice 18px теж нормально.

Поганий Contrast

Погано:

p {
  color: #cccccc;
  background-color: #ffffff;
}

Світло-сірий текст на білому фоні важко читати.

Може виглядати “soft”.

Але також виглядає невидимим.

Твій content не має грати в хованки.

Занадто Багато Fonts

Погана ідея:

h1 {
  font-family: Georgia, serif;
}

h2 {
  font-family: "Courier New", monospace;
}

p {
  font-family: Arial, sans-serif;
}

Занадто багато fonts робить сторінку messy.

Почни з одного font.

Можливо, з двох пізніше.

Не з дванадцяти.

Це website, а не font zoo.

Практика

Створи маленьку blog-style page з:

одним header;
одним title;
одним subtitle;
однією article card;
одним category label;
двома headings;
чотирма paragraphs;
одним link;
одним footer.

Потім стилізуй:

page background;
header background;
title size;
paragraph color;
paragraph line height;
link color;
footer text;
article card spacing.

Зосередься на readability.

Не на decoration.

Readable first.

Fancy later.

Як навчитися ходити перед тим, як купувати блискучі кросівки.

Міні-Завдання

Створи дві article cards.

Дай їм обом class:

class="article-card"

Потім створи special class:

class="article-card highlighted"

Стилізуй highlighted article інакше:

.highlighted {
  border: 2px solid #2563eb;
}

Спробуй змінити:

title color;
category color;
link hover style;
paragraph line height;
card spacing.

Ти практикуєш справжнє CSS thinking:

base style plus variation.

Саме так websites залишаються organized, а не перетворюються на style soup.

Підсумок

Сьогодні ти дізнався, що:

color змінює колір тексту;
background-color змінює фон;
font-family контролює шрифт;
font-size контролює розмір тексту;
font-weight контролює товщину тексту;
line-height покращує читабельність;
text-align контролює вирівнювання;
text-transform змінює регістр тексту;
letter-spacing змінює відстань між літерами;
text-decoration контролює underline та інші лінії тексту;
хороша стилізація тексту робить websites легшими для читання.

Текст — не маленька деталь.

Текст — головний content багатьох websites.

Стався до нього добре.

Users це помітять.

Навіть якщо не знатимуть, чому.

Наступний Урок

У наступному уроці ми вивчимо box model.

Margin.

Padding.

Border.

Content.

Секретну геометрію кожної web page.

Готуйся.

Boxes are coming.

Кольори, Шрифти і Стилізація Тексту

Що Ти Вивчиш

Чому Стилізація Тексту Важлива

Створи Проєкт

Напиши HTML

Почни з Базових Стилів Сторінки

Колір Тексту через color

Background Color

Font Family

Font Size

Font Weight

Line Height

Text Align

Text Transform

Text Decoration

Стилізуй Article Card

Стилізуй Footer

Повний CSS

Типові Помилки

Занадто Малий Текст

Поганий Contrast

Занадто Багато Fonts

Практика

Міні-Завдання

Підсумок

Наступний Урок