Розділ 2 · Завдання 4

HEX-кольори та id

Точні кольори через код, і стиль для одного унікального елемента.

Частина 1. HEX-коди

Слів типу red, blue мало. HEX-код — 6 символів після #, які точно визначають колір. Додайте в style.css:

style.css

p {
  color: red;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

.custom-color {
  color: #ff6600;
}

І в styles-demo.html

Додайте новий абзац:

styles-demo.html

<p class="custom-color">Це текст помаранчевого кольору через HEX-код</p>

Як це читати

HEX-код — 3 пари символів: червоний, зелений, синій. Кожна пара від 00 (нема) до ff (максимум).

#ff0000 — червоний, #00ff00 — зелений, #000000 — чорний, #ffffff — білий.

Порада

Щоб підібрати HEX-код, пошукайте в Google «color picker» — клацаєте на колір і одразу бачите його код.

Частина 2. id — для унікального елемента

Клас можна вішати на багато елементів. Якщо потрібен один-єдиний унікальний — використовують id. Додайте в style.css:

style.css

#main-title {
  color: #0066cc;
  font-size: 40px;
}

І на початку body в styles-demo.html

Додайте:

styles-demo.html

<h1 id="main-title">Заголовок сторінки</h1>

Головна різниця

Клас (.) — можна використовувати скільки завгодно разів. id (#) — тільки один раз на сторінці.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща