Погляньмо на нашу сторінку.
Вона має заголовки,
абзац з описом кроликів,
а також, багато абзаців
зі словами моєї улюбленої пісні про кроликів.
Минулого разу ми оформили перший абзац пісні, використавши '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"