Структурная разметка: кодирую то что думаю, думаю то что кодирую

Написать CSS просто, использовать же его можно лишь начав думать другим образом, нежели чем большинство из нас привыкли.

Вместо того, чтоб думать в стиле «Аха, это будет тут и вот это здесь» в процессе работы над разметкой страницы, вам нужно думать о разных типах информации на странице и о структуре данной информации.

Обозначьте наиболее важный заголовок страницы тегом <h1>, под-заголовки - тегами <h2> и подобными, параграфы, разумеется, тегами параграфов <p>.

Такой подход и называют «структурной» или «семантической» разметкой.

Вместо размещения информации внутри таблиц и разбиения её на ячейки, она предполагает использование тегов div обозначенных по-смыслу содержимого аттрибутами id или class.