В чем отличие 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. Стили из этого файла выводятся в выпадающем списке стилей при редактировании страниц в визуальном редакторе.