Див <div></div> предназначет для выделения фрагмента документа. Содержимое дива всегда начинается с новой строки и заканчивается переносом строки.

Для того что бы сделать видимыми границы дива я добавлю к нему рамку

Див занимает всю ширину пространства. Что бы изменить ширину нужно добавить в стили width и указать ширину или в пикселях или в процентах

Сделаем див шириной в половину доступного пространства.

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

Окружим див тегами <center> и </center>

Теперь наш див расположен в центре, но и текст выровнен по центру! Для того что бы текст размещался с левой стороны нужно в стиль дива прописать text-align: left;

Значения text-align могут быть:

• left - по левой сторооне
• right - по правой стороне
• center - поцентру
• justify - выравнивание по ширине. Текст будет выровнен как по левой так и по правой сторное. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Тест прилегает вплотную к границам дива. Если граница невидима то в это нет ничего страшного, но в нашем примере это выглядит некрасиво. Сделать отступы от содержимого дива до границ дива можно указав в стиле параметр padding. Если отступ нужен только с одной стороны то можно использовать:

• padding-left - отступ слева
• padding-rigth - оступ справа
• padding-top - отступ сверху
• padding-bottom - отступ снизу

Теперь текст выглядит более красиво

Что бы добавить еще красоты зададит цвет и размер шрифта текста и цвет фона

color - цвет текста, background-color - цвет фона, font-size - размер шрифта

Сделаем этот рисунок фоновым для нашего дива

Добавим к стилю дива параметр background и укажем в нем ссылку на фоновый рисунок

Добавим всплывающую подсказку к диву, которая будет появлять при наведении мышки на див. Добавим параметр title

Вот, пожалуй, пока и все :)))