PART II: мова CSS
Ви вже вмієте будувати сайти за допомогою HTML. Тепер навчимося роботи сайти красивими.
CSS — це мова, яка допомагає візуалізувати будь-які елементи сайту. Наприклад, задати шрифти тексту, створити кнопку з тінню, гратися з кольорами, розмірами і так далі.
Ось, як працює та виглядає CSS
У відео є важливе завдання. Виконай його для власного розвитку. Ми його не перевірятимемо, але воно дуже важливе, щоб засвоїти CSS
Як під’єднати CSS до сайту
За допомогою CSS ми робимо сайти красивими. Html говорить браузеру, що за об’єкт зобразити, а CSS говорить, як цей об’єкт виглядатиме.
А отже треба підключити CSS-стилі до нашого сайту. Є декілька варіантів.
Формат 1. Написати стиль в конкретному тегові через атрибут style (атрибути вже вчили), але це не дуже професійно. Наприклад, ви задали стиль тексту одному абзацу. А у вас стаття, в якій 20 абзаців. Тоді нам треба пройтись по всім та дописати в кожен атрибут та задати потрібний стиль. Не дуже зручно, адже окрім тексту у нас ще багато об’єктів.
Формат 2. Задати новий тег в html-документі, як <style></style> в середині тегу <head> (як і всі налаштування сторінки). І вже в ньому прописуємо об’єкт, якому треба надати стиль.
Формат 3. Прописати всі стилі в окремому файлі, а потім просто під’єднати. Це найпрофесійніший варіант. В такому форматі зручно працювати з командою, html-документ не перенавантажується зайвим синтаксисом. Тому на курсі ми будемо використовувати його.
Григорій його розібрав на відео, але продублюємо:
Для цього:
1. Створимо окремий CSS-файл
2. Під’єднати його до нашої html-сторінки, де будемо налаштовувати стилі.Як створити та назвати файл? CSS-файли — звичайні текстові документи, але з розширенням .css. Називати файл можна лише латинськими літерами, з тире чи нижнім підкресленням. Не можна вживати спеціальні символи (типу «?», «,», «#», «!») та пробілів.
❌ Неправильні назви:
майн.css
main 2.css
m!2.css
✅ Правильні назви:
main.css
main_2.css
m_2.css
Як під’єднати до HTML-сторінки? За допомогою тегу:
<link rel=”stylesheet” href=”шлях до вашого css-файлу”>
Його треба вписати у тег <head></head>, адже туди пишуться всі налаштування сторінки.
👉 Як це виглядає у коді?
Завдання:
1. Створити CSS-файл
2. За допомогою тегу, під’єднати його до файлу index.html, який ми створили піл час курсу по html.
