Погляньмо на нашу сторінку.

Вона має заголовки,

абзац з описом кроликів,

а також, багато абзаців

зі словами моєї улюбленої 
пісні про кроликів.

Минулого разу ми оформили перший
абзац пісні, використавши 'id'.

Але зараз, оскільки я маю декілька
абзаців зі словами,

я хочу, щоб вони всі мали
фон жовтого кольору.

Як ми можемо це зробити, застосувавши
те, що ми вже знаємо?

Спочатку ми вивчили,

як вибрати всі теги певного типу,

так як було у випадку з селектором 'р'.

Але так ми зафарбували усі абзаци,
а не лише абзаци з піснею.

Нам потрібно щось конкретніше.

Потім ми вивчили, як вибрати теги
з певним 'id',

так як було у випадку з вибором абзацу
з 'id' "пісня-кроликів".

Але таким чином ми вибрали
лише перший абзац.

Ми не можемо додати цей 'id' 
до інших абзаців,

тому що нам не дозволено використовувати
однаковий 'id' для декількох тегів.

Якщо б ми захотіли вибрати
інші абзаци,

ми б мали дати кожному з них
новий 'id',

наприклад, "слова-пісні2" і
"слова-пісні3",

тому що кожний 'id' мусить 
бути унікальним.

І потім ми б мали додати 
правила для кожного з них.

Ми можемо це зробити.
Але, оу, потрібно багато попрацювати.

І щоразу, як ми додаватимемо
новий куплет пісні,

ми мусимо не забути додати
ще один 'id' до HTML коду

і ще один 'id' до правил CSS.

І якщо ми додамо сотні куплетів,
це буде просто виснажливо!

Але знаєте що?

Існує кращий спосіб,
і він називається "класи" ("classes").

В основному клас — це

спосіб об'єднати певні елементи
в групу.

І ви можете об'єднати стільки 
елементів, скільки захочете.

Щоб додати клас, ми маємо додати
атрибут 'class', так як це було у випадку з 'id'.

Спочатку я видалю цей ID,
оскільки я збираюсь його замінити.

Потім я ставлю курсор 
на початок тега "р".

Я додаю пробіл і пишу
class = "

Тепер нам потрібно придумати
ім'я класу.

Якесь змістовне.

Назвімо його 
"слова-пісні".

Я це написала тут.

Які інші елементи має містити цей клас?

Усі інші абзаци пісні.

Тому ми просто підемо 
вниз по сторінці

і додамо атрибут до кожного
абзацу класу.

("слова-пісні").

Чудово.
Тепер ми можемо додати правило CSS.

Тому ми піднімаємось до тега

і видаляємо селектор 'id',
який ми вказали раніше,

оскільки ми його хочемо замінити.

І зараз ми маємо написати селектор класу.

Щоб запустити селектор класу,
ми використаємо крапку.

Потім напишемо ім'я класу: "слова-пісні",

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

Та-дам!

Вся пісня тепер має жовтий фон.

Що станеться, якщо ми збільшимо 
літеру "s" тут?

Не працює.

Тому що для імен класів
розмір літер має значення.

Важливо, які літери є великі, 
а які маленькі,

так само як і для 'id'.

Що буде, якщо ми використаємо
решітку замість крапки?

Не працює.

Тому що так браузер думає, 
що "слова-пісні" — це 'id',

і коли він не може знайти такого
'id', як "слова-пісні",

він здається.

Що станеться, якщо ми додамо пробіли 
до імені класу?

Це також не працюватиме,

тому що імена класів
не можуть містити пробілів.

І як ми вивчимо пізніше,

пробіли означають дещо дуже
особливе у мові CSS.

Тому ми зробимо все, як було.

Отже, повторимо ще раз:

Коли ми хочемо додати клас,

ми йому придумуємо ім'я,

додаємо його до атрибута класу в HTML.

Потім створюємо правило стилю,

поставивши крапку
і написавши ім'я класу.

Тепер ваш СSS може бути класним!

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