InnoMarts logo
InnoMarts
Fast websites
← Back to course

Перші Кроки з CSS

Перші Кроки з CSS

Ласкаво просимо до першого уроку CSS.

У HTML-курсі ти навчився будувати структуру веб-сторінки.

Тепер у кімнату заходить CSS.

CSS дивиться на твій простий HTML і каже:

“Гарна структура. Дуже відповідально. Але чому ти одягнений як бланк з державної установи?”

CSS додає сторінці стиль.

Він контролює кольори, шрифти, відступи, layout, рамки, фони і багато інших візуальних деталей.

HTML створює контент.

CSS робить цей контент читабельним, приємним і менш здатним налякати відвідувачів.

Що Ти Вивчиш

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

Що Таке CSS?

CSS означає Cascading Style Sheets.

Це мова, яку використовують для стилювання HTML-документів.

HTML каже:

<h1>Hello World</h1>

CSS каже:

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

Разом вони створюють сторінку, яка має і структуру, і стиль.

HTML — це скелет.

CSS — це одяг, зачіска, взуття і, можливо, сонцезахисні окуляри.

Але не забагато окулярів.

Ми будуємо сайти, а не починаємо драматичний музичний кліп.

Навіщо Існує CSS

Уяви, що ти пишеш стилі прямо всередині кожного HTML-елемента.

Ось так:

<h1 style="color: blue; font-size: 48px;">Hello World</h1>
<p style="color: gray; font-size: 18px;">This is my paragraph.</p>

Це працює.

Але дуже швидко перетворюється на хаос.

Якщо в тебе 50 заголовків і ти хочеш змінити їхній колір, доведеться редагувати 50 місць.

Це не development.

Це покарання з додатковим набором тексту.

CSS дозволяє писати правила стилю в одному місці.

Приклад:

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

p {
  color: gray;
  font-size: 18px;
}

Тепер усі елементи h1 і всі елементи p можуть використовувати ті самі правила.

Чисто.

Організовано.

Менше хаосу.

CSS уже зараз рятує твого майбутнього себе від страждань.

Створи Свій Перший CSS-Проєкт

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

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

Тепер у тебе є два файли:

css-lesson1/
  index.html
  style.css

index.html міститиме структуру сторінки.

style.css міститиме стилі.

Це розділення важливе.

HTML робить структуру.

CSS робить дизайн.

Як двоє людей на одному проєкті.

Один будує стіну.

Інший каже: “Гарна стіна. Давай її пофарбуємо.”

Напиши 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</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Моя Перша CSS-Сторінка</h1>
    <p>CSS робить HTML красивішим.</p>
  </header>

  <main>
    <section>
      <h2>Про Цю Сторінку</h2>
      <p>Це проста сторінка, створена для практики базового CSS.</p>
    </section>

    <section>
      <h2>Що Я Вивчаю</h2>
      <ul>
        <li>Як підключити CSS до HTML</li>
        <li>Як стилізувати заголовки</li>
        <li>Як змінювати кольори і відступи</li>
      </ul>
    </section>
  </main>

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

Найважливіший рядок тут:

<link rel="stylesheet" href="style.css">

Цей рядок з’єднує HTML-файл з CSS-файлом.

Без нього CSS-файл може кричати весь день.

HTML-сторінка його не почує.

Елемент link

Елемент link розміщується всередині head.

Приклад:

<link rel="stylesheet" href="style.css">

Він каже браузеру:

Завантаж файл style.css і використай його як stylesheet для цієї сторінки.

Атрибут rel означає relationship.

Атрибут href вказує шлях до файлу.

Якщо CSS-файл лежить у тій самій папці, що й index.html, це працює:

href="style.css"

Якщо CSS-файл лежить у папці css, шлях буде таким:

href="css/style.css"

Шляхи важливі.

Браузер не телепат.

На жаль.

Напиши Свій Перший CSS

Відкрий style.css і додай це:

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

h1 {
  color: #2563eb;
}

h2 {
  color: #111827;
}

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

Збережи файл.

Відкрий index.html у браузері.

Сторінка має виглядати інакше.

Вітаю.

Ти щойно стилізував свою першу сторінку за допомогою CSS.

Церемонія не потрібна.

Але маленьке святкування з кавою дозволяється.

Як Працюють CSS-Правила

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

selector {
  property: value;
}

Приклад:

h1 {
  color: blue;
}

Тут:

Це означає:

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

CSS дає інструкції браузеру.

Іноді браузер слухається.

Іноді ти зробив помилку в тексті.

Зазвичай це помилка в тексті.

Будь сильним.

Selectors

Selector вибирає те, що ти хочеш стилізувати.

Приклад:

p {
  color: gray;
}

Це вибирає всі елементи p.

Приклад:

h2 {
  font-size: 32px;
}

Це вибирає всі елементи h2.

Поки що ми використовуємо прості element selectors.

Пізніше вивчимо classes, IDs, combinations і потужніші selectors.

CSS selectors — це ніби сказати:

“Ти. Так, ти. Одягни цей стиль.”

Дуже прямо.

Дуже театрально.

Properties і Values

Property — це те, що ти хочеш змінити.

Value — це як саме ти хочеш це змінити.

Приклад:

color: red;

color — це property.

red — це value.

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

font-size: 24px;

font-size — це property.

24px — це value.

CSS має багато properties:

Не намагайся запам’ятати все сьогодні.

Так початківці перетворюються на втомлені меблі.

Вчися крок за кроком.

Додай Кращі Відступи

Тепер покращимо відступи сторінки.

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

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

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

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

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

footer {
  text-align: center;
  padding: 20px;
  color: #666;
}

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

Не ідеально.

Але точно менше схожа на HTML, який утік з підвалу.

Що Таке margin?

margin — це простір зовні елемента.

Приклад:

section {
  margin-bottom: 20px;
}

Це додає простір під кожною секцією.

Margin — це як особистий простір.

Елементам він потрібен.

Людям він потрібен.

Твоєму layout він точно потрібен.

Що Таке padding?

padding — це простір всередині елемента.

Приклад:

section {
  padding: 24px;
}

Він створює простір між краєм секції і контентом всередині.

Без padding текст прилипає до країв.

І це виглядає незручно.

Як сісти занадто близько до когось у порожньому автобусі.

Що Таке background-color?

background-color змінює фон елемента.

Приклад:

header {
  background-color: #111827;
}

Це робить header темним.

Можна використовувати назви кольорів:

color: blue;

Або hex values:

color: #2563eb;

Hex values спочатку виглядають загадково.

Як секретні коди.

Але це просто коди кольорів.

Ніякої магії.

Тільки пікселі, які вдають магію.

Тестування з Локальним Сервером

Можна відкрити index.html прямо в браузері.

Але можна також використати Caddy, щоб запустити папку локально:

caddy file-server --listen :8080

Потім відкрий:

http://localhost:8080

Це корисно, коли хочеш, щоб проєкт поводився більше як справжній сайт.

Не обов’язково.

Але зручно.

І так, локальний сервер робить тебе трохи професійнішим.

Навіть якщо твій CSS ще свариться з margin.

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

Забути link до CSS

Якщо CSS не працює, перевір цей рядок:

<link rel="stylesheet" href="style.css">

Переконайся, що він всередині head.

Переконайся, що назва файлу правильна.

style.css — це не те саме, що styles.css.

Комп’ютери суворі.

Вони не пробачають орфографічної драми.

Випадково писати CSS всередині HTML

CSS має бути в style.css.

Не всередині body ось так:

<body>
  h1 {
    color: blue;
  }
</body>

Це неправильно.

HTML подивиться на це і скаже:

“Я не знаю, що це, але виглядає підозріло.”

Пропущені крапки з комою

Краще так:

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

Кожен рядок property зазвичай має закінчуватися крапкою з комою.

CSS іноді виживе без останньої.

Але не тестуй його терпіння.

Практика

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

Потім стилізуй її за допомогою CSS.

Твій CSS має змінити:

Тримай усе просто.

Сьогодні не треба ставати дизайнером.

Сьогодні треба змусити HTML слухати CSS.

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

Зміни сторінку так, щоб:

Змінюй по одній речі.

Збережи.

Онови.

Подивись.

Це CSS-цикл.

Пиши.

Зберігай.

Оновлюй.

Плутанина.

Виправлення.

Перемога.

Повторити.

Підсумок

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

Ти написав свій перший CSS.

Це справжній крок уперед.

Сторінка може ще не бути шедевром.

Але це вже не голий HTML, який стоїть під дощем.

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

У наступному уроці ми детальніше вивчимо selectors і базове стилювання.

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

Це дуже важливо.

Бо CSS без selectors — це просто людина, яка кричить дизайнерські інструкції в порожнечу.