CSS (Cascading Style Sheets – каскадні таблиці стилів) – формальна мова опису зовнішнього вигляду документа, створеного за допомогою мови розмітки. Переважно вона використовується для опису та оформлення зовнішнього вигляду веб-сторінок, написаних за допомогою HTML та XHTML, але може застосовуватися й до інших XML-документів, наприклад, SVG або XUL.
У перші роки (1990–1993) Всесвітньої павутини HTML була досить обмеженою мовою. Вона практично складалася лише зі структурних елементів, корисних для опису абзаців, гіперпосилань, списків та заголовків. Не існувало елементів, що нагадували таблиці, фрейми чи складну розмітку – тих, що сьогодні вважаються абсолютно необхідними для створення веб-сторінок. HTML спочатку задумували як мову розмітки для опису різних частин документа, а питання їх відображення залишалося на другому плані. Мова не передбачала опису зовнішнього вигляду – вона була своєрідною схемою розмітки.
Зі зростанням популярності Інтернету з’явилася потреба у більш якісному оформленні сторінок. Так з’явилися атрибути та теги, що могли змінювати зовнішній вигляд документа.
<font size="+3" face="Helvetica" color="red">Заголовок сторінки</font>
При цьому тег font не впливає на логічну структуру документа. Вміст сторінок почав перетворюватися на суміш корисних даних та «корисного» оформлення.
Приклад коду без оформлення:
<body>
<h1>Основний заголовок</h1>
<p>Текст абзацу 1</p>
<h2>Підзаголовок 1</h2>
<p>Текст абзацу 2</p>
<h2>Підзаголовок 2</h2>
<p>Текст абзацу 3</p>
</body>
Та ж сама розмітка, але з доданими тегами оформлення:
<body bgcolor="#f1f1f1">
<h1 align="center">
<font size="16px" color="red" face="Tahoma">Основний заголовок</font>
</h1>
<p><font size="8px" color="gray" face="Arial">Текст абзацу 1</font></p>
<h2><font size="10px" face="Tahoma">Підзаголовок 1</font></h2>
<p><font size="8px" color="gray" face="Arial">Текст абзацу 2</font></p>
<h2><font size="10px" face="Tahoma">Підзаголовок 2</font></h2>
<p><font size="8px" color="gray" face="Arial">Текст абзацу 3</font></p>
</body>
Звичайно, проблема забруднення HTML візуальною розміткою не залишилася непоміченою консорціумом W3C (World Wide Web Consortium), який почав шукати рішення. У 1995 році було розпочато публікацію робочої версії стандарту, названого CSS. До 1996 року він отримав статус рекомендації, що мало таку ж значущість, як і сам HTML.
Переваги використання CSS:
Головною перевагою CSS стало розділення опису логічної структури документа та опису його зовнішнього вигляду.
Приклад сторінки після додавання CSS:
<style>
body {
background: #f1f1f1;
}
h1 {
font-size: 34px;
color: red;
font-family: Tahoma;
text-align: center;
}
h2 {
font-size: 24px;
font-family: Tahoma;
}
p {
font-size: 18px;
color: gray;
font-family: Arial;
}
</style>
<body>
<h1>Основний заголовок</h1>
<p>Текст абзацу 1</p>
<h2>Підзаголовок 1</h2>
<p>Текст абзацу 2</p>
<h2>Підзаголовок 2</h2>
<p>Текст абзацу 3</p>
</body>