Урок 76 із 104
73%
← Назад

Скидання стилів через універсальний селектор у CSS

Вчимося скасовувати стандартні відступи браузера за допомогою універсального селектора та підключати окремий файл reset.css до HTML-сторінки.

Файл reset.css

Під час верстки часто потрібно прибрати стандартні зовнішні та внутрішні відступи, які браузер додає HTML-елементам. Для цього можна створити окремий файл reset.css.

У класичному варіанті reset.css використовують універсальний селектор *. Він вибирає всі елементи на сторінці.

* {

margin: 0;
padding: 0;
}

Підключення reset.css

Файл reset.css потрібно підключити до HTML-документа за допомогою елемента link.

<!DOCTYPE html>

<html lang="uk"> <head> <meta charset="UTF-8"> <title>CSS Reset</title>

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">

</head>

<body> <h1>Заголовок</h1> <p>Абзац тексту</p>

<ul>
  <li>Перший пункт</li>
  <li>Другий пункт</li>
</ul>

</body> </html>

Порядок підключення CSS-файлів

Спочатку підключають reset.css, а після нього основний файл styles.css. Тоді власні стилі з styles.css можуть перевизначити правила, встановлені у reset.css.

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

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

Перевіримо на практиці

Створіть два CSS-файли. У reset.css додайте скидання відступів, а в styles.css залиште файл порожнім. Відкрийте HTML-сторінку в браузері та порівняйте її вигляд із версією без reset.css.

/* reset.css */

{
margin: 0;
padding: 0;
}
/* styles.css */

/* Поки що файл порожній */
❗ Важливо:

Класичний reset через * — простий навчальний приклад. У сучасних проєктах не завжди потрібно повністю прибирати margin і padding у всіх елементів. Часто використовують більш вибірковий reset.

Практичне завдання

📌 Завдання:
  1. №1. Створіть файл reset.css.
  2. №2. Додайте до нього універсальний селектор *.
  3. №3. Скиньте margin і padding усіх елементів до 0.
  4. №4. Створіть HTML-сторінку із заголовком, абзацом і списком.
  5. №5. Підключіть спочатку reset.css, а потім styles.css.
  6. №6. Подивіться, як змінився зовнішній вигляд сторінки після підключення reset.css.
💡 Показати підказку

Використайте універсальний селектор * та властивості margin: 0 і padding: 0. Не забудьте підключити reset.css перед styles.css.

✅ Показати відповідь
/* reset.css */
{
margin: 0;
padding: 0;
}

/* HTML */

<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="styles.css">