Що таке CSS?
CSS (Cascading Style Sheets) — мова опису зовнішнього вигляду сторінки: кольори, шрифти, відступи, розташування блоків і поведінка верстки на різних розмірах екрана. HTML задає, що є на сторінці, CSS — як це виглядає.
Стилі записуються правилами: селектор вказує, до яких елементів застосувати оформлення, а всередині перелічуються властивості та їхні значення. Слово «каскадні» у назві означає механізм пріоритетів: коли до елемента підходить кілька правил, перемагає більш специфічне.
Сучасний CSS відповідає за всю розкладку інтерфейсу. Flexbox і Grid вибудовують елементи в ряди та сітки, медіазапити адаптують сторінку під мобільні екрани, змінні й анімації дозволяють обходитися без JavaScript там, де раніше він був обовʼязковим.
Де застосовується
CSS відповідає за все, що видно на екрані після того, як розмітка готова: сітка сторінки, адаптація під телефон і монітор, темна тема, стани кнопок, плавні переходи. У реальних проєктах його рідко пишуть «голим» — підключають Tailwind, Sass або методологію на кшталт БЕМ, щоб стилі не перетворилися на кашу.
Окрема зона відповідальності — продуктивність і доступність. Важкі тіні та анімації, що перераховують розкладку, помітно просідають швидкість на слабких телефонах, а недостатній контраст тексту перетворюється на реальну проблему для частини користувачів і на зауваження під час перевірки сайту.
Приклад
Картки каталогу мають іти в чотири колонки на моніторі, у дві на планшеті й в одну на телефоні. У сучасному CSS це один рядок із grid і автоматичним добором кількості колонок — без жодного рядка JavaScript і без окремої мобільної версії сайту.
.catalog {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card {
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}Часті запитання
Що означає «каскадні» у назві CSS?
Це правило розвʼязання конфліктів. До одного елемента може підходити кілька правил одразу, і браузер обирає переможця за специфічністю селектора та порядком оголошення. Розуміння каскаду позбавляє звички лікувати стилі ключовим словом important.
Що вчити: Flexbox чи Grid?
Обидва, вони розвʼязують різні задачі. Flexbox вибудовує елементи вздовж однієї осі — меню, панель кнопок, рядок карток. Grid працює у двох вимірах і підходить для розкладки сторінки цілком. На практиці їх спокійно комбінують в одному макеті.
Чи потрібен Tailwind, чи достатньо звичайного CSS?
Починати варто зі звичайного CSS: без розуміння каскаду, селекторів і розкладки Tailwind перетворюється на запамʼятовування класів. Коли база є, утилітарний підхід економить час у великих проєктах і тримає стилі поруч із розміткою. Це інструмент, а не заміна знанню CSS.
Як зробити сайт адаптивним?
Починають з мобільної версії і розширюють її медіазапитами. Використовують відносні одиниці замість жорстких пікселів, гнучкі сітки на flex і grid, зображення з обмеженням за шириною контейнера. Перевіряти результат потрібно на реальних пристроях, а не лише зменшуючи вікно браузера.