До появи таблиць стилів форматування HTML-документів здійснювалося за допомогою атрибутів, що визначали колір, вирівнювання, шрифти, розміри тощо. Наприклад, щоб відформатувати документ так:
Це абзац з червоним кольором, вирівнюванням по центру та гарнітурою Georgia.
Ще один абзац з тим самим форматуванням.
У Блокноті для кожного абзацу з таким форматуванням доводилося повторювати однакові теги:
<p><font color="red" face="Georgia"><center>Це абзац з червоним кольором, вирівнюванням по центру та гарнітурою Georgia.</center></font></p>
<p><font color="red" face="Georgia"><center>Ще один абзац з тим самим форматуванням.</center></font></p>Під час створення документів великого обсягу таке форматування вимагало величезної кількості часу й зусиль, оскільки цю конструкцію треба було вставляти щоразу, коли потрібно було відформатувати текст.
Це збільшувало "вагу" документа, і без того значну через велику кількість форматувальних тегів, а отже, подовжувало час завантаження документа.
Зрозуміло, що було б зручно окремо задавати стиль для будь-якого з тегів документа.
p {
color: red;
text-align: center;
font-family: Georgia, serif;
}