Selectors і Базове Стилювання

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

У попередньому уроці ти дізнався, що таке CSS і як підключити його до HTML.

Тепер ми вивчаємо selectors.

Selectors — це спосіб, яким CSS вибирає, що саме стилізувати.

Без selectors CSS просто стоїть посеред кімнати і кричить:

“Зроби це синім!”

А браузер питає:

“Що саме?”

Гарне питання, браузере.

Дуже професійно.

Що Ти Вивчиш

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

що таке CSS selectors;
як працюють element selectors;
як працюють class selectors;
як працюють ID selectors;
як працюють grouped selectors;
як працюють descendant selectors;
як писати чистіший CSS;
як застосовувати базове стилювання до реального HTML.

Що Таке Selector?

Selector каже CSS, які HTML-елементи потрібно стилізувати.

Приклад:

p {
  color: gray;
}

Тут p — це selector.

Це означає:

Вибери всі paragraph elements і зроби їхній текст сірим.

CSS завжди має знати, що саме стилізувати.

Selector — це “хто”.

Declarations — це “що”.

Приклад:

h1 {
  color: blue;
  font-size: 48px;
}

Це означає:

Знайди кожен h1, зроби його синім і великим.

Дуже прямо.

Майже командирським голосом.

Але у web development трохи командирського голосу іноді корисно.

Базова Структура CSS-Правила

CSS-правило виглядає так:

selector {
  property: value;
}

Приклад:

h2 {
  color: #111827;
}

Частини такі:

h2 — selector;
color — property;
#111827 — value.

Selector вибирає елемент.

Property каже, що змінити.

Value каже, як це змінити.

CSS — це список інструкцій.

Іноді елегантний.

Іноді драматичний.

Іноді на відстані однієї пропущеної крапки з комою від хаосу.

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

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

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

Тепер у тебе є:

css-lesson2/
  index.html
  style.css

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

Спочатку напишемо HTML.

Потім стилізуємо його різними selectors.

Такий план.

І цього разу план, можливо, навіть переживе зустріч із браузером.

Напиши 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>CSS Selectors</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="top">
    <h1>CSS Selectors</h1>
    <p class="intro">Selectors допомагають CSS знайти правильні HTML-елементи.</p>
  </header>

  <main>
    <section class="card">
      <h2>Element Selectors</h2>
      <p>Element selectors стилізують усі елементи одного типу.</p>
    </section>

    <section class="card featured">
      <h2>Class Selectors</h2>
      <p>Class selectors можна використовувати багато разів, і вони дуже корисні.</p>
    </section>

    <section class="card">
      <h2>ID Selectors</h2>
      <p>ID selectors вибирають один унікальний елемент на сторінці.</p>
    </section>

    <section class="practice-box">
      <h2>Зона Практики</h2>
      <p>Ця зона допоможе нам тестувати різні selectors.</p>
      <a href="#top">Назад вгору</a>
    </section>
  </main>

  <footer>
    <p>Створено під час вивчення CSS selectors.</p>
  </footer>
</body>
</html>

Зверни увагу на кілька важливих речей:

id="top";
class="intro";
class="card";
class="card featured";
class="practice-box".

Це hooks.

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

Hooks важливі.

Без hooks CSS мусить здогадуватись.

А CSS — не детектив.

Element Selectors

Element selectors вибирають HTML-елементи за назвою тегу.

Приклад:

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

Це стилізує весь body.

Інший приклад:

p {
  font-size: 18px;
}

Це стилізує всі paragraphs.

Додай це до style.css:

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

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

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

Це element selectors:

body;
h1;
h2;
p.

Вони впливають на кожен відповідний елемент на сторінці.

Корисно.

Потужно.

Але іноді занадто широко.

Як використовувати валик для фарби, щоб виправити одну маленьку крапку.

Class Selectors

Class selector вибирає елементи з конкретним class.

В HTML:

<p class="intro">Selectors допомагають CSS знайти правильні HTML-елементи.</p>

У CSS:

.intro {
  font-size: 20px;
}

Крапка . означає class.

Тобто .intro вибирає кожен елемент з:

class="intro"

Додай це до style.css:

.intro {
  font-size: 20px;
  color: #dbeafe;
}

Тепер тільки paragraph з class intro стилізується таким способом.

Classes можна використовувати багато разів.

Можна дати той самий class багатьом елементам.

Приклад:

<section class="card">

І CSS:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Додай це:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Тепер кожна section з class card отримує той самий стиль.

Це одна з найважливіших ідей CSS.

Reusable styles.

Менше повторення.

Менше страждання.

Благородна мета.

Multiple Classes

Один елемент може мати більше ніж один class.

Приклад:

<section class="card featured">

Цей елемент має два classes:

card;
featured.

Він отримує стилі з обох.

Додай цей CSS:

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

Тепер featured card отримує додаткове стилювання.

Вона все ще має звичайні стилі .card.

Але також отримує стилі .featured.

Це корисно, коли тобі потрібен базовий стиль плюс спеціальна версія.

Як звичайна піца.

А потім піца з додатковим сиром.

CSS розуміє додатковий сир.

Принаймні емоційно.

ID Selectors

ID selector вибирає один унікальний елемент.

В HTML:

<header id="top">

У CSS:

#top {
  background-color: #111827;
}

Символ # означає ID.

Додай це:

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

ID має бути унікальним на сторінці.

Це означає, що не треба мати багато елементів з однаковим ID.

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

Для styling зазвичай краще використовувати classes.

ID корисні для:

унікальних зон сторінки;
внутрішніх посилань;
JavaScript пізніше;
спеціальних одноразових елементів.

Думай про ID як про номер паспорта.

Class більше схожий на футболку команди.

Багато людей можуть носити однакову футболку.

Але тільки одна людина має мати той самий номер паспорта.

Grouped Selectors

Іноді потрібно застосувати той самий стиль до кількох selectors.

Замість цього:

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

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

Можна згрупувати:

h1,
h2 {
  font-family: Arial, sans-serif;
}

Кома означає:

Застосуй це правило до обох selectors.

Приклад:

h1,
h2 {
  margin-top: 0;
}

Додай це:

h1,
h2 {
  margin-top: 0;
}

Grouped selectors допомагають тримати CSS коротшим і чистішим.

Чистіший CSS легше читати.

Легше читати — легше виправляти.

Легше виправляти — менше драматичних зітхань.

Descendant Selectors

Descendant selector вибирає елемент всередині іншого елемента.

Приклад:

footer p {
  color: #666;
}

Це означає:

Вибери кожен p всередині footer.

Він не вибирає всі paragraphs.

Тільки paragraphs всередині footer.

Додай це:

footer p {
  color: #666;
  text-align: center;
}

Інший приклад:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

Це вибирає links всередині .practice-box.

Додай це:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

Descendant selectors корисні, коли важливий контекст.

Link у paragraph може виглядати звичайно.

Link у спеціальній box може виглядати інакше.

CSS може це обробити.

CSS має думки.

Багато думок.

Стилізуй Layout

Тепер додай більше структури сторінці:

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

footer {
  padding: 20px;
}

Тепер сторінка має виглядати більш організовано.

Ти використовуєш:

element selectors;
class selectors;
ID selectors;
grouped selectors;
descendant selectors.

Це серйозний крок.

CSS toolbox відкривається.

Постарайся не вдарити себе молотком.

Повний CSS

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

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

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

h1,
h2 {
  margin-top: 0;
}

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

.intro {
  font-size: 20px;
  color: #dbeafe;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

footer {
  padding: 20px;
}

footer p {
  color: #666;
  text-align: center;
}

Збережи.

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

Подивись.

Якщо нічого не змінилось, перевір:

назву файлу;
link до CSS;
spelling;
крапки з комою;
фігурні дужки;
чи ти зберіг файл.

Bug “я забув зберегти” — легендарний.

Він переміг багатьох сміливих developers.

Class чи ID?

Використовуй classes більшість часу.

Використовуй ID тільки тоді, коли щось справді унікальне.

Хороше використання class:

<section class="card">

Бо cards може бути багато.

Хороше використання ID:

<header id="top">

Бо top area лише одна.

Погана ідея:

<section id="card">
<section id="card">
<section id="card">

Не роби так.

IDs не мають повторюватися.

Браузер може все одно показати сторінку.

Але код стає підозрілим.

Як три людини з одним паспортом в аеропорту.

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

Забути крапку для classes

Неправильно:

card {
  background-color: white;
}

Правильно:

.card {
  background-color: white;
}

Без крапки CSS шукає HTML-елемент <card>.

І якщо ти його не створював, нічого не станеться.

CSS суворий.

Він не вгадує твої мрії.

Забути решітку для IDs

Неправильно:

top {
  background-color: black;
}

Правильно:

#top {
  background-color: black;
}

# каже CSS, що це ID.

Без # немає ID selector.

Маленький символ.

Велика різниця.

Робити selectors занадто широкими

Це впливає на всі paragraphs:

p {
  color: red;
}

Іноді це нормально.

Іноді тобі потрібна тільки одна зона:

.card p {
  color: #444;
}

Будь конкретним, коли потрібно.

Не стилізуй усе село, якщо хотів пофарбувати тільки одні двері.

Практика

Створи власну сторінку з:

одним header;
одним intro paragraph;
трьома cards;
однією featured card;
однією practice box;
одним footer.

Використай:

element selectors;
class selectors;
один ID selector;
один grouped selector;
один descendant selector.

Спробуй стилізувати:

background colors;
text colors;
spacing;
borders;
border radius;
link color.

Тримай CSS організованим.

Не кидай styles всюди, як конфеті після весілля.

Конфеті веселе.

Debugging конфеті — ні.

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

Створи три cards:

Basic Plan;
Standard Plan;
Premium Plan.

Дай усім cards class card.

Дай Premium Plan додатковий class featured.

Приклад:

<section class="card featured">
  <h2>Premium Plan</h2>
  <p>This plan has extra features.</p>
</section>

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

усі cards з однаковим padding і background;
featured card з border;
headings зі спільним стилем;
тільки links всередині cards спеціальним кольором.

Саме так працюють реальні сайти.

Reusable styles.

Special variations.

Менше хаосу.

Більше контролю.

Підсумок

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

selectors кажуть CSS, що стилізувати;
element selectors вибирають HTML tags;
class selectors використовують крапку, наприклад .card;
ID selectors використовують решітку, наприклад #top;
classes можна використовувати багато разів;
IDs мають бути унікальними;
grouped selectors ділять styles між кількома selectors;
descendant selectors вибирають elements всередині інших elements;
чисті selectors роблять CSS легшим для підтримки.

Selectors — це фундамент CSS.

Якщо ти розумієш selectors, ти можеш контролювати сторінку.

Якщо не розумієш selectors, CSS стає загадковим супом.

А ми вже домовились:

Суп має бути в мисці.

Не в твоєму stylesheet.

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

У наступному уроці ми детальніше стилізуватимемо текст, fonts і colors.

Бо читабельний текст важливий.

Сайт з нечитабельним текстом — це просто puzzle з hosting.