Що таке CSS і як підключити
Перші кроки зі стилями: підключення і CSS-селектори
CSS — це одяг для HTML
HTML — це голе тіло (структура). CSS — одяг, макіяж, зачіска. Без CSS сторінка виглядає як документ Word 1990-х: чорний текст на білому фоні. CSS перетворює той самий HTML у сучасний стильний дизайн.
Три способи підключити CSS
1. Зовнішній файл (найкращий спосіб)
<!-- В <head> HTML файлу -->
<link rel="stylesheet" href="style.css">Файл style.css зі всіма стилями підключається до сторінки.
2. Всередині <head> (внутрішній)
<style>
body { background: #f0f0f0; }
h1 { color: blue; }
</style>3. Атрибут style (inline, уникай)
<p style="color: red; font-size: 18px;">Текст</p>Погано: стилі розкидані по HTML, важко підтримувати.
Правило: завжди використовуй зовнішній CSS файл.
CSS-селектори — як вибрати елемент
Селектор вказує до яких елементів застосувати стиль:
/* Тег — всі <p> на сторінці */
p { color: gray; }
/* Клас — всі елементи з class='btn' */
.btn { background: blue; color: white; }
/* ID — лише елемент з id='header' */
#header { height: 80px; }
/* Всі елементи */
* { box-sizing: border-box; }
/* Вкладені — <a> всередині <nav> */
nav a { text-decoration: none; }
/* Hover — при наведенні миші */
.btn:hover { background: darkblue; }Специфічність (пріоритет стилів): inline style > #id > .class > тег
Якщо два правила конфліктують — перемагає більш специфічне.
Реальний базовий CSS файл. rem — відносна одиниця від розміру шрифту браузера (зазвичай 16px). 1rem = 16px, 2.5rem = 40px.
Завжди починай CSS з * { box-sizing: border-box; margin: 0; padding: 0; } — це CSS Reset. Він прибирає різні дефолтні відступи браузерів і уніфікує поведінку.