Синтаксис CSS і базові селектори

CSS-правила кажуть браузеру, як має виглядати HTML. Коли ти розумієш базову структуру правила, ти можеш керувати кольорами, розміром тексту, кнопками, картками та багатьма іншими візуальними частинами сторінки.

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

CSS-правило має дві основні частини:

• Селектор, який каже браузеру, який HTML потрібно стилізувати.
• Блок декларацій, який каже браузеру, як саме це стилізувати.

Блок декларацій записується у фігурних дужках {}.

Селектор, властивість і значення

Усередині блоку декларацій CSS використовує декларації. Ось що означає кожна частина:

• Властивість — це візуальна характеристика, яку ти хочеш змінити, наприклад color або font-size.
• Значення — це налаштування, яке ти обираєш для цієї властивості, наприклад blue або 32px.
• Двокрапка : відділяє властивість від значення.
• Крапка з комою ; позначає кінець декларації.

Декларація записується так:

Крапки з комою важливі, бо вони допомагають браузеру зрозуміти, де закінчується одна CSS-інструкція і починається наступна.

Перший приклад коду

<h1 class="page-title">Моя перша сторінка зі стилями</h1>
<p>Цей абзац використовує селектор елемента.</p>
<button id="main-button">Почати</button>

<style>
  h1 {
    color: blue;
  }

  .page-title {
    font-size: 32px;
  }

  #main-button {
    background-color: green;
  }
</style>

Пояснення коду

Блок <style> містить три CSS-правила.

Перше правило використовує селектор h1, щоб знайти заголовок і зробити його текст синім.

Друге правило використовує .page-title, щоб знайти елементи з класом page-title і встановити розмір шрифту 32px.

Третє правило використовує #main-button, щоб знайти елемент з ID main-button і змінити колір фону кнопки на зелений.

Селектори елементів

Селектори елементів напряму вибирають HTML-теги.

Наприклад, це правило стилізує всі абзаци на сторінці:

<p>Перший абзац</p>

<p>Другий абзац</p>

<style>
  p {
    color: green;
  }
</style>

Селектори елементів корисні для простих базових стилів, але вони впливають на всі відповідні теги.

Селектори класів

Селектори класів дозволяють стилізувати конкретні елементи, не змінюючи всі елементи того самого типу.

Селектор класу починається з крапки ..

<p class="highlight">Цей абзац виділений.</p>

<p>Інший абзац.</p>

<style>
  .highlight {
    color: orange;
  }
</style>

Один і той самий клас можна повторно використовувати для багатьох елементів.

Селектори ID

Селектори ID використовуються для одного унікального елемента на сторінці.

Селектор ID починається з #.

<button id="main-button">Почати</button>

<style>
  #main-button {
    background-color: yellow;
  }
</style>

У звичайному HTML той самий ID варто використовувати лише один раз на сторінці. Якщо потрібно однаково стилізувати багато елементів, використовуй клас.

Згруповані селектори

Згруповані селектори дозволяють кільком селекторам мати один і той самий стиль. Розділяй селектори комою.

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

<p>Інший абзац.</p>

<style>
  h1,
  h2,
  p {
    color: blue;
  }
</style>

Це правило застосовує той самий синій колір тексту до елементів h1, h2 і p.

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

Подивись на це CSS-правило:

Визнач селектор, властивість і значення.

Відповідь:

• Селектор — button.
• Властивість — color.
• Значення — white.

Короткий тест

Питання 1: Який символ стоїть на початку селектора класу?

Відповідь: Крапка ..

Питання 2: Який символ стоїть на початку селектора ID?

Відповідь: Решітка #.

Питання 3: Навіщо CSS-декларації зазвичай закінчуються крапкою з комою?

Відповідь: Щоб позначити, де закінчується одна інструкція перед початком наступної.

Малий виклик

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

• Зміни колір заголовка за допомогою селектора класу.
• Зміни розмір абзацу за допомогою селектора класу.
• Дай кнопці новий колір фону за допомогою її ID.

<h2 class="card-title">Картка для практики</h2>
<p class="card-text">Стилізуй цей текст за допомогою CSS.</p>
<button id="practice-button">Натисни</button>

<style>
  /* напиши свій CSS нижче */

</style>

Підсумок

• CSS-правило має селектор і блок декларацій.
• Декларації записуються як property: value;.
• Селектори елементів стилізують усі відповідні HTML-теги.
• Селектори класів починаються з . і можуть використовуватися повторно.
• Селектори ID починаються з # і мають бути унікальними на сторінці.
• Згруповані селектори використовують коми, щоб застосувати один стиль до кількох селекторів.