Пошук уроків, статей та іншого контенту
З’ясуєте, що таке HTML і CSS, які завдання вони виконують та як разом формують веб-сторінку.
Веб-сторінка, яку ми бачимо в браузері, складається з двох основних частин:
HTML описує вміст і структуру сторінки.
CSS визначає її зовнішній вигляд.
Наприклад, HTML може повідомити браузеру, що на сторінці є заголовок, абзац і кнопка. CSS може зробити заголовок синім, вирівняти його по центру та додати кнопці фон.
У спрощеному вигляді:
HTML — це структура сторінки, а CSS — її оформлення.
HTML розшифровується як HyperText Markup Language, тобто «мова гіпертекстової розмітки».
HTML не є мовою програмування. Він використовує спеціальні елементи, щоб позначати різні частини документа:
заголовки;
абзаци;
списки;
посилання;
зображення;
кнопки;
форми.
Елемент HTML зазвичай складається з відкривального та закривального тегів:
<p>Це абзац тексту.</p>У цьому прикладі:
<p> — відкривальний тег;
Це абзац тексту. — вміст елемента;
</p> — закривальний тег.
Деякі елементи не мають окремого закривального тегу. Наприклад, елемент <img> використовується для додавання зображення.
Типовий HTML-документ має таку структуру:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Моя сторінка</title>
</head>
<body>
<h1>Вітаю!</h1>
<p>Це моя перша веб-сторінка.</p>
</body>
</html>Розглянемо основні частини:
<!doctype html> повідомляє браузеру, що документ використовує сучасний HTML.
<html> містить увесь HTML-документ.
<head> містить службову інформацію про сторінку.
<title> задає назву сторінки у вкладці браузера.
<body> містить видимий вміст сторінки.
<h1> — головний заголовок.
<p> — абзац.
CSS розшифровується як Cascading Style Sheets, тобто «каскадні таблиці стилів».
CSS відповідає за те, як HTML-елементи виглядають на сторінці:
колір тексту;
розмір шрифту;
відступи;
фон;
межі;
вирівнювання;
розташування елементів.
CSS-правило складається з селектора та набору властивостей:
h1 {
color: blue;
font-size: 32px;
}У цьому прикладі:
h1 — селектор, який вибирає всі елементи <h1>;
color — властивість кольору тексту;
blue — значення властивості;
font-size — властивість розміру шрифту;
32px — значення розміру;
фігурні дужки містять правила оформлення.
Один CSS-селектор може мати кілька властивостей:
p {
color: #333;
line-height: 1.5;
}Це правило встановлює для абзаців темно-сірий колір тексту та міжрядковий інтервал.
HTML створює елементи, а CSS знаходить ці елементи та застосовує до них стилі.
Наприклад, HTML:
<h1>Мій сайт</h1>
<p>Ласкаво просимо!</p>CSS:
h1 {
color: darkblue;
}
p {
color: gray;
}Браузер об’єднує ці два описи та показує оформлену сторінку:
текст Мій сайт буде темно-синім;
текст Ласкаво просимо! буде сірим.
Без CSS ці елементи все одно відобразяться, але матимуть стандартний вигляд браузера.
Існує кілька способів додати CSS до HTML. Для початку важливо знати два основні.
Правила можна записати в елементі <style> усередині <head>:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Стилізована сторінка</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
}
</style>
</head>
<body>
<h1>Мій сайт</h1>
</body>
</html>Такий спосіб зручний для невеликих прикладів або навчання.
Зазвичай CSS зберігають в окремому файлі, наприклад styles.css.
Файл index.html:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Моя сторінка</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Вітаю на моїй сторінці!</h1>
<p>HTML відповідає за структуру, а CSS — за оформлення.</p>
</body>
</html>Файл styles.css:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
color: #222;
}
h1 {
color: #174ea6;
}
p {
font-size: 18px;
}Елемент <link> підключає файл зі стилями до HTML-документа:
<link rel="stylesheet" href="styles.css">Значення href має містити правильний шлях до CSS-файлу.
Нижче наведено повний приклад, який можна зберегти у файл index.html і відкрити у браузері:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Картка користувача</title>
<style>
body {
margin: 0;
padding: 40px;
font-family: Arial, sans-serif;
background-color: #eef2ff;
}
.card {
max-width: 400px;
margin: 0 auto;
padding: 24px;
background-color: white;
border: 1px solid #d0d7e2;
border-radius: 12px;
text-align: center;
}
.card h1 {
margin-top: 0;
color: #243b7a;
}
.card p {
color: #4a5568;
line-height: 1.5;
}
.button {
display: inline-block;
padding: 10px 18px;
color: white;
background-color: #3157c7;
border-radius: 6px;
text-decoration: none;
}
.button:hover {
background-color: #23439f;
}
</style>
</head>
<body>
<main class="card">
<h1>Олена</h1>
<p>Розробниця, яка вивчає HTML і CSS.</p>
<a class="button" href="#">Дізнатися більше</a>
</main>
</body>
</html>У цьому прикладі HTML описує:
основний вміст сторінки через <main>;
заголовок через <h1>;
текст через <p>;
посилання, оформлене як кнопка, через <a>.
CSS описує:
колір фону сторінки;
ширину та відступи картки;
колір заголовка;
вигляд посилання;
зміну кольору посилання під час наведення курсора.
Щоб застосувати стиль не до всіх елементів певного типу, а лише до вибраних елементів, використовують атрибут class.
HTML:
<p class="important">Цей текст важливий.</p>
<p>Це звичайний текст.</p>CSS:
.important {
color: red;
font-weight: bold;
}Крапка перед important означає, що CSS вибирає елементи з класом important.
Один клас можна застосувати до кількох елементів:
<h2 class="title">Перший заголовок</h2>
<h2 class="title">Другий заголовок</h2>.title {
color: navy;
}У результаті обидва заголовки матимуть темно-синій колір.
Коли браузер відкриває HTML-файл, він:
читає HTML і створює структуру документа;
читає CSS-правила;
визначає, які стилі належать кожному елементу;
відображає готову сторінку на екрані.
HTML-структуру документа часто називають DOM — об’єктною моделлю документа. На початковому етапі достатньо розуміти, що браузер перетворює HTML-код на набір елементів, до яких CSS може застосувати стилі.
Не варто використовувати HTML лише для візуального ефекту. Наприклад, заголовок потрібно створювати через <h1>, а не через звичайний <p> із великим шрифтом.
HTML має описувати значення елемента, а CSS — його вигляд.
Неправильно:
<p>ТекстКраще:
<p>Текст</p>Незакриті або неправильно вкладені теги можуть спричинити непередбачуване відображення сторінки.
Якщо файл називається styles.css, у HTML потрібно вказати саме це ім’я:
<link rel="stylesheet" href="styles.css">Помилка в імені файлу або шляху призведе до того, що стилі не завантажаться.
Для класу card правильний селектор виглядає так:
.card {
padding: 20px;
}Запис card без крапки означає пошук HTML-тега <card>, а не класу.
Кожне CSS-правило бажано завершувати крапкою з комою:
p {
color: gray;
font-size: 18px;
}Це робить код зрозумілішим і допомагає уникати помилок під час додавання нових властивостей.
HTML описує структуру та вміст веб-сторінки.
CSS описує її зовнішній вигляд.
HTML використовує теги та атрибути.
CSS використовує селектори, властивості та значення.
Браузер об’єднує HTML і CSS та відображає результат на екрані.
HTML-файл може містити CSS усередині <style> або підключати окремий CSS-файл через <link>.
Класи дають змогу застосовувати стилі до вибраних елементів.