Рекомендации

1. 

Названия классов и идентификаторов должны начинаться с латинской буквы и могут содержать цифры, а также символы "-", "_".
Например:
.title1, .left_banner, .top-menu, #footer_inner ... — правильная запись
.1_title, #banner_(left) — неправильная запись

2. 

При создании нового класса - делайте название класса смысловым.
Например:
.td_bg_green {background:green;}  /* td_bg_green — стиль для ячейки таблицы с зеленым фоном*

3. 

Пишите комментарии, чтобы Вам в последствие было проще ориентироваться в файле. Комментарии видны только разработчику и не отображаются на странице.
Текст комментария заключается в конструкцию /* текст комментария */.

4. 

Соблюдайте иерархичность при записи правил. Используйте отступы и пробелы для создания легкочитаемой структуры файла.

5. 

Созданный класс можно использовать многоразово.
Например, Вы хотите выделить важную информацию в блок с красной рамкой.

Для этого:

1. Открываем редактор стилей. Пишем правило:

.important_info {border:2px solid red; padding:5px;} 

Этим правилом мы создаем класс с рамкой толщиной в 2px и чтобы текст не был впритык к рамке —  задаем отступ от рамки до текста 5px.

2. Сохраняем изменения.

3. Открываем визуальный редактор изменяемого раздела.

4. С помощью инструмента HTML-исходник применяем правило к элементам, которые необходимо выделить.

<p class="important_info">Вот в такую красную рамку мы выделили важную информацию.</p>
<p>Теперь самое интересное.</p>
<p class="important_info">Внимание! Созданный класс можно использовать много раз. </p>
<p>Это значит что нет необходимости создавать новый класс для каждого элемента.</p>
<p>Просто объявите созданный Вами класс у нужного элемента.</p>

5. Сохраняем изменения.

Результат выполнения кода: