Що таке CSS і як він відповідає за зовнішній вигляд сайту?

1. Що таке CSS простими словами та навіщо він потрібен?

CSS (Cascading Style Sheets — каскадні таблиці стилів) — це мова стилів, яка використовується для оформлення та розкладки (layout) вебсторінок.

Вона потрібна для того, щоб повністю контролювати зовнішній вигляд HTML-елементів у браузері. Без CSS вебсторінка виглядала б як простий текстовий документ. CSS дозволяє змінювати шрифти, кольори, розміри й відступи контенту, ділити сторінку на колонки, додавати анімації, фонові зображення та інші декоративні ефекти.

2. Чим роль CSS відрізняється від ролі HTML та JavaScript?

HTML (мова розмітки) визначає зміст і структуру документа (створює заголовки, абзаци, кнопки, списки).

CSS (мова стилів) відповідає виключно за візуальне представлення та дизайн (як саме ці елементи розміщуються, розфарбовуються та оформлюються).

JavaScript (мова сценаріїв) надає сторінці динаміку та інтерактивну поведінку (реагує на події, обробляє дані).

3. Як CSS підключається до HTML?

Існує три основні способи застосування стилів до HTML-документа:

Зовнішні стилі (External stylesheet): підключення окремого файла з розширенням .css у розділі <head> за допомогою тегу <link> (найбільш рекомендований спосіб для підтримки коду).

Внутрішні стилі (Internal stylesheet): написання CSS-правил безпосередньо всередині HTML-документа в блоці <style>.

Вбудовані / інлайн стилі (Inline styles): написання CSS-декларацій прямо в HTML-тегу через глобальний атрибут style="...".

4. Що таке CSS-селектори, властивості та значення?

Базовим елементом CSS є правило (ruleset), яке складається з селектора та блоку декларацій:

Селектор (Selector): вказує браузерному рушію, до яких саме HTML-елементів на сторінці слід застосувати стилі (наприклад, селектори тегів h1, класів .button, ідентифікаторів #header чи атрибутів).

Властивість (Property): людсько-читабельний ідентифікатор стильової характеристики, яку ми змінюємо (наприклад, color, font-size, width).

Значення (Value): конкретна величина чи параметр, що задається властивості (наприклад, red, 2.5em, 350px).

Властивість і значення розділяються двокрапкою :, а кожна декларація завершується крапкою з комою ;.

5. Що означають cascade, specificity та inheritance?

Ці три концепції регулюють, які саме стилі будуть застосовані при виникненні конфліктів між правилами:

Cascade (каскад): означає, що джерело та порядок оголошення правил мають значення. Якщо два правила мають однакову вагу, перемагає те, яке розташоване нижче (пізніше) у коді.

Specificity (специфічність): математичний алгоритм розрахунку «ваги» селектора:

Селектори елементів та псевдоелементи мають найнижчу вагу (1 бал).

Класи, атрибути та псевдокласи мають середню вагу (10 балів).

ID-селектори мають високу вагу (100 балів).

Інлайн-стилі (style="") мають вагу 1000 балів.

Прапорець !important перебиває всі звичайні розрахунки специфічності та каскаду.

Inheritance (успадкування): властивість, за якою дочірні елементи автоматично отримують деякі значення стилів від батьківського елемента (наприклад, color, font-family). Властивості розмірів та відступів (width, margin, padding, border) не успадковуються. Для керування успадкуванням використовуються універсальні значення inherit, initial, revert, revert-layer та unset.

6. Що таке CSS box model і з чого він складається?

У CSS кожен елемент розглядається як прямокутний контейнер — Box Model (блокова модель).

Він складається з чотирьох шарів (від центру до периферії):

Content (контент): внутрішня ділянка, де відображається текст, зображення тощо.

Padding (внутрішній відступ): прозорий простір між контентом і рамкою.

Border (рамка): лінія, яка обгортає внутрішній відступ і контент.

Margin (зовнішній відступ): невидима зона зовні від рамки, яка відштовхує інші елементи сусідніх блоків.

Примітка про розміри: За стандартної блокової моделі загальна ширина елемента складається з width + padding + border. При використанні альтернативної моделі (box-sizing: border-box) задана ширина width вже включає в себе padding і border, що значно спрощує розрахунок макетів.

7. Як CSS керує зовнішнім виглядом та розташуванням елементів?

Кольори та фон: за допомогою color, background-color, градієнтів та фонових зображень.

Шрифти та текст: через font-family (включаючи створення гарнітур або font stacks), font-size (в px, em або rem), font-weight (bold), font-style (italic), line-height (висота рядка) та text-align.

Розміри та відступи: властивості width, height, minmax(), margin та padding.

Розташування (Layout): через властивість display (block, inline, inline-block, flex, grid), позиціонування (position) та плаваючі елементи (float).

8. Що таке Flexbox і CSS Grid та для чого вони потрібні?

Flexbox (Flexible Box Layout): одномірна (1D) система розкладки, призначена для гнучкого розподілу простору та вирівнювання елементів уздовж однієї осі (рядка або стовпчика). Ідеально підходить для меню, кнопок, карток та вирівнювання елементів по центру.

CSS Grid Layout: двомірна (2D) система розкладки, яка дозволяє розташовувати елементи одночасно за колонками та рядками. Ідеально підходить для побудови загальних сіток сторінок (шапка, сайдбар, контентна зона, підвал).

9. Що таке Responsive Design і Media Queries?

Responsive Web Design (RWD / Адаптивний дизайн) — це підхід до розробки, при якому сайт автоматично підлаштовує свій макет під розміри екрана, роздільну здатність та тип пристрою (смартфон, планшет, десктоп).

Media Queries (@media): техніка CSS, яка дозволяє застосовувати окремі блоки стилів тільки при виконанні певних умов екрана (наприклад, @media screen and (width >= 600px)).

Mobile-First: популярний підхід, коли спочатку верстається базовий одноколонковий макет для мобільних пристроїв, а потім за допомогою медіа-запитів додаються правила для ширших екранів.

Для коректного відображення на мобільних обов'язково додається метатег <meta name="viewport" content="width=device-width" />.

10. Як CSS впливає на UX, Accessibility та Core Web Vitals?

UX (User Experience): чітка ієрархія розмірів, оптимізований міжрядковий інтервал (line-height) та продумані відступи роблять контент зручним для читання та навігації.

Accessibility (Доступність): правильний контраст кольорів та збереження візуальних рамок фокусу клавіатури дозволяють людям із вадами зору або тими, хто користується клавіатурою, вільно пересуватися сайтом. Зауваження: зміна візуального порядку елементів через властивість order у Flexbox не змінює порядок навігації клавіатурою (Tab), що слід враховувати для доступності.

Core Web Vitals & Продуктивність: ефективне використання сучасних сіток (Flexbox/Grid) зменшує обсяг HTML-коду, запобігає небажаним зсувам верстки (CLS) під час завантаження та покращує швидкість рендерингу сторінки браузером.