У цьому розділі мова піде про те, як впровадити CSS в документ HTML, тобто зв'язати стильове опис елемента безпосередньо з самим елементом, яким або HTML тегом.

Здійснити це завдання можна трьома способами:

Написати стильове опис безпосередньо в самому елементі. Такий спосіб хороший лише в тому випадку якщо такий елемент один єдиний в HTML документі який потребує окремого стильовому описі.

Написати стильове опис для всіх ідентичних елементів HTML документа. Такий спосіб виправдовує себе, якщо стиль сторінки принципово відрізняється від загального дизайну сайту (групи взаємопов'язаних сторінок).

Винести стильове опис елементів HTML в окремий файл CSS. Це дозволить управляти дизайном всього сайту цілком, кожною сторінкою сайту в якій вказано звернення до CSS файлу. Цей спосіб є найбільш ефективним використанням таблиці каскадних стилів.

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

Атрибут style.

Практично кожен HTML тег має атрибут style. який говорить про те, що до цього тегу застосовується якесь стильове опис.

це параграф з індивідуальним стилем

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

це параграф з індивідуальним стилем

В даному випадку ми вказали, що цей параграф повинен відображатися червоним кольором і мати розмір шрифту в 12 пікселів. У наступних розділах я детально розповім про те що написано в лапках. Зараз же йдеться про те як застосувати CSS до якогось HTML тегу.

За таким же принципом можна вказати індивідуальний стиль практично для кожного HTML елемента.

Але ще раз повторюся, такий спосіб впровадження CSS хороший лише в тому випадку, якщо потрібно задати певний стиль малому числу HTML елементів.

Для того, що б описати необхідні елементи одночасно на всій сторінці в заголовок HTML документа впроваджують тег (Не плутайте з однойменною атрибутом) в якому і відбувається опис потрібних нам елементів.

Як видно з прикладу ми домоглися точно такого ж результату що і в першому випадку тільки тепер ми не прописуємо кожному елементу стиль індивідуально, а винесли його в "голову" документа тим самим, вказавши, що всі заголовки

,

- будуть синіми, а параграфи

- червоними. Уявіть, як ми полегшили б собі роботу, будь на сторінці сотня таких параграфів і штук п'ятнадцять заголовків, так і сам документ став менше важити за рахунок "видалення" всіх повторюваних стильових описів для кожного окремо взятого елемента.

тег