Форматируем текст

В данном абзаце текст выравнивается по левому краю, отступ первой строки отсутствует, а внутренние отступы (padding) не установлены. Короче, текст нами еще не форматировался, а использовались значения по умолчанию.

Выравниваем текст по ширине (text-align: justify;), задаем отступ первой строки на 0.5em (text-indent: 0.5em;) и добавляем внутренний отступ сверху в 10 пикселей (padding-top: 10px;).

Чтобы строки не располагались слишком близко друг к другу, увеличиваем межстрочный интервал (line-height: 1.3;). Также увеличиваем интервал между словами и буквами (letter-spacing: 1px;).

Здесь мы используем шрифт Gabriola (font-family: Gabriola;) с размером шрифта 20 пикселей (font-size: 20px;) и задаем темно-зеленый цвет (color: #007700;). Высоту строки сделаем чуть больше размера самого шрифта (line-height: 22px;).

В данном абзаце мы использовали собственный шрифт (font-family: my_font_1;), который ранее загрузили из интернета. Размер шрифта установили в 16px (font-size: 16px;).

Чтобы части длинных слов, которые не помещаются по ширине, не выходили за пределы допустимой ширины нашего абзаца, а переносились на новую строку, мы задали правило расстановки переносов в словах (word-break: break-all;). Это может понадобиться, например, в поле ввода комментариев (так, например, сделано в соцсети Вконтакте или на нашем сайте стишков). А вот и слово: парапапарампарапапарампарапапарампарапапарам. Кстати, здесь мы использовали дробный интервал между символами (letter-spacing: 0.5px;).

Самостоятельно еще раз посмотрите в справочнике свойства text-decoration, direction, text-transform, unicode-bidi.

Верстка текста в две колонки

Здесь мы организовали 2-х колоночную верстку. Прием заключается в том, что мы использовали два блочных элемента (абзаца), которые сделали плавающими. Но дело в том, что плавающие элементы выпадают из общего потока и поэтому не влияют на высоту родительских элементов, что приводит к наползанию контента друг на друга и проблемам при расчете высот. Чтобы обойти такие неприятные моменты, мы поместили наши блоки, которые служат колонками, в блок-обертку и добавили после них дополнительный пустой блок-подпорку, которому запретили обтекание плавающих вверху элементов. В результате такого приема блок-подпорка займет всю доступную ширину блока-обертки, не имея при этом высоты, и будет располагаться под самой высокой колонкой, подгоняя тем самым и высоту блока-обертки.

Внешне будет складываться впечатление, что наши плавающие элементы никуда и не выпадали, а остались в потоке документа. Для всех абзацев внутри блока-обертки мы используем одинаковую ширину и оформление (хотя ширина может быть разной), поэтому если убрать границы, то визуально можно легко реализовать верстку в две и более колонок.