В чем отличие template_styles.css от styles.css в битриксе?
template_styles.css отвечает за стили шаблона, который будет отображаться у пользователя на странице
styles.css - стили которые будут использовать в ВИЗУАЛЬНОМ РЕДАКТОРЕ при создании/редактировании страницы.
Например: в template_styles.css может быть определен стиль:div {
	font-weight:bold;
}
И для всего сайта у вас весь текст в div будет жирный.
Но в визуальном редакторе может быть прописано:div {
	font-weight: normal;
}
Таким текст на всем сайте у Вас будет жирный, а в визуальном редакторе нет. Вот и получиться, что Ваш визуальный редактор не такой уж и визуальный.
Для того чтобы этого не произошло, дополнительно и существует этот файл :)
В курсе всё же расписано:
Стили, используемые в шаблоне дизайна, хранятся отдельно в файле template_styles.css.. Это - основной CSS-файл шаблона.
стили, используемые при оформлении контента страниц (стили сайта), хранятся в файле styles.css. Стили из этого файла выводятся в выпадающем списке стилей при редактировании страниц в визуальном редакторе.