#2 – Форматы подключения стилей

Преимущества CSS очевидны, так как он позволяет оформлять сайты: из некрасивой HTML разметки преобразовывать всё в отличные веб сайты с современным дизайном. 

CSS позволяет добавлять не только стили для блоков, но также позволяет создавать анимацию, что может проигрываться при загрузке страницы или же при наведении мыши на объект.

Для понимания возможностей CSS предлагаем посмотреть наш урок по CSS анимации:

Способы подключения CSS

Всего существует 3 способа, что позволяют записывать стили для HTML объектов. Каждый способ стоит применять в определенных случаях. 

Атрибут style

Если вам необходимо записать небольшие стили для какого-либо отдельного HTML объекта, то можно воспользоваться простым атрибутом style. В него можно помещать CSS стили, которые будут применены конкретно для того объекта, у которого мы прописали данный атрибут. Добавлять таким образом стили для всех объектов по отдельности очень плохая затея. Ваш код станет совсем не читабельным, а загрузка страницы вырастет в разы. Подобный способ стоит применять только в особых случаях для одного-двух элементов на странице.

Тег style

Второй способ позволяет записывать стили уже для многих элементов. Это способ написания стилей в теге style. Вот пример такой записи:

<style>
	какие-нибудь CSS стили
</style>

Способ достаточно хороший, но его также стоит использовать в редких случаях. К примеру, если необходимо добавить стили, которые будут лишь на этой странице и нигде более. При этом, если стилей много, то лучше воспользоваться третим вариантом, который способен отграничить стили от HTML файла, что позволяет создавать сайты с чистым кодом, легким для чтения.

Отдельный CSS файл

Третий вариант. Он позволяет создать отдельный файл с расширением .css и подключить его к веб странице при помощи специального тега в шапке сайта - head:

<link rel="stylesheet" href="style.css">

Этот вариант является наилучшим, так как позволяет отделять стили от HTML документа, что не только улучшит время загрузки сайта, но также улучшит читаемость кода в целом.