На цій сторінці ми використали CSS,

щоб оформити заголовки h2 і деякі абзаци,

тому зараз заголовки зелені,
а абзаци фіолетові.

Але що, якщо ми хочемо вибрати
лише перший заголовок h2

або оформити лише другий абзац?

Ми маємо знайти спосіб 
сказати браузеру, який саме

з елементів ми обираємо,

щоб він не застосував стиль
до всіх елементів, як зараз.

Один зі спосіб зробити це – це вибір за ID.

Ми можемо надати тегу на сторінці
унікальний ID,

і потім сказати CSS:

"Послухай, я хочу застосовувати 
ці стилі лише для елементів з таким ID,

а не для всіх інших".

Першим кроком,
буде зміна HTML,

додавши атрибути ID до тегів, які ми
хочемо обрати окремо.

Почнімо з другого абзаца.

Щоб додати атрибут ID,
ми ставимо курсор

на початок тега 
відразу після літери "р",

потім ставимо пробіл і далі 
пишемо id = "

Тепер нам потрібно надати цьому 
атрибуту "id" значення.

Яке значення я маю надати?

Воно має бути змістовним і унікальним.

Ніщо інше на цій сторінці не має
мати такий самий ID.

Оскільки це пісенька про кроликів,
я назву її "пісня-кроликів".

В ID не можна використовувати пробілів,
тому якщо він містить декілька слів,

ви маєте використовувати дефіс
або знак підкреслення.

Я справді люблю дефіси.

Тепер ми вже знаємо спосіб зробити 
цей абзац унікальним

і можемо додати правило CSS,
яке застосуємо для нього.

Повернімося до тега ,
це буде нашим другим кроком.

Ми додамо новий рядок 
після останнього правила.

Запам'ятайте, перша частина
правила CSS – це селектор:

частина, яка каже браузеру,
що ж обирати.

В минулих правилах ми використовували
селектори "h2" чи "p",

щоб обрати усі теги  чи 
на нашій сторінці.

Тепер, щоб задати селектор, 
який вибирає елементи

з конкретним ID,

ми маємо на початку селектора
поставити знак решітки "#".

Таким чином браузер зрозуміє, що все,
що буде йти далі – це ID.

Тепер ми пишемо ID: пісня-кроликів.

Решта правила така сама, як і раніше.

Ми відкриваємо і закриваємо
фігурні діжки,

пишемо властивість,
наприклад, колір фону (англ. background color)...

... і та-дам! Це спрацювало!

Тільки абзац пісні має
жовтий колір фону,

а перший абзац
залишився таким самим.

Повторимо це знову,
і вибиремо перший заголовок .

Пам'ятаєте перший крок?

Правильно. Ми маємо 
змінити код HTML,

додавши атрибут "ID".

Отже, ми ставимо курсор
на початок тега,

додаємо пробіл, 
пишемо "id ="

і потім додаємо змістовний
і унікальний ID.

"Заголовок-інформації-про-кроликів".

Добре, тепер другий крок.
В тезі

ми додаємо новий рядок,
ставимо знак решітки "#",

потім ID,
"Заголовок-інформації-про-кроликів",

і далі пишемо властивість у 
фігурних дужках:

{колір фону: фіолетовий;}.

О-о! Добре, не спрацювало.
Хммм... Ви бачите, що пішло не так?

Може я... неправильно щось написала?

заголовок-інформації-про-кроликів,
Заголовок-інформації-про-кроликів...

Хмм... виглядають майже однаково.

Тепер я можу порівняти їх
літера за літерою,

щоб з'ясувати, що пішло не так.

Але що мені краще зробити, це піти вниз
і вибрати ID в HTML,

скопіювати його і вставити його тут,
щоб точно знати, що він такий самий.

І... вдалось!

Мій заголовок  має фон.
Ви помітили, що змінилось?

Можливо, побачили. Справа була літера "H".
Вона була великою,

а браузер знає, що велика та
маленька літери – це різні речі.

Вона мала бути маленькою,
щоб відповідати HTML.

Це тому, що для ID розмір літер
має значення.

Тому ви маєте писати їх 
всюди однаково.

Як на мене, найкраще просто завжди
використовувати маленькі літери в ID,

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

Гаразд, дозвольте ще додати
одне попередження:

ID мусить бути унікальним!

Якщо ви матимете два теги на сторінці
з одинаковим ID,

браузер, можливо, оформить обидва,
а, може, лише один.

А ви ж не хочете, щоб це вирішувалось
долею випадку.

Гарні, унікальні, змістовні ID.

Переклад на українську: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"