Как подключить CSS (каскадные таблицы стилей) к HTML?

Очень важно отметить, что HTML – это не язык программирования, как считает большинство неопытных пользователей, а лишь средство для верстки веб-страниц и никак иначе! Запомните это. Очень много вижу нелепых сообщений, где люди говорят о том, что они программисты и пишут свои «программы» на HTML. Наверное, я вас огорчу, но это не так.

HTML – лишь инструмент для верстки страницы, и если вы занимаетесь этим – вы верстальщик. А вот если вы дополнительно пишите какие-нибудь скрипты или модули, на том же JavaScript или PHP – тут можно поговорить о таком понятии, как программист. Но речь сейчас пойдет не об этом, и когда мы точно узнали, является ли HTML языком программирования или нет, перейдем к главному этой статье.

Помимо того, что HTML выступает в качестве верстки ваших веб-страниц, существует такое понятие, как CSS (нет, это не игра Counter-Strike: Source, как могло подумать множество юных вебмастеров), это каскадные таблицы стилей. Суть их – это формирование общего стиля страницы или отдельного ее элемента. Простыми словами – отступы, цвет, шрифт, ширина, высота и прочие другие параметры настраиваются именно через эти стили.

Самих свойств существует большое множество, некоторые из них универсальны, а некоторые – персональны для того или иного элемента. Описывать их мы сейчас не будем, а остановимся на том, как же подключить ваши стили к HTML-документу.

Подключение внешней таблицы стилей

Внешний файл стилей имеет расширение .css (это обязательное условие) и название файла на английском языке. Пример – main.css или style.css. После того, как вы создали такой файл и заполнили его соответствующими стилями – загрузите его на свой сайт в удобную для вас папку и осуществите подключение к HTML-документу.

Самый распространенный способ подключения внешнего файла стилей – это:

<link rel="stylesheet" type="text/css" href="main.css" />

Или сокращенный вариант для HTML5:

<link rel="stylesheet" href="main.css" />

На что тут стоит обратить внимание?

1. Файл подключается в секцию HEAD на все страницы вашего сайта. Там, где этого файла нет, будет отсутствовать ваше оформление.
2. В части href пишется полная или относительная ссылка к CSS-файлу.
3. Необязателен, но желателен последний закрывающий слеш. Так код получается «по фэн-шую».
4. Подключать на страницу можно сколько угодное число файлов стилей. Главное – без фанатизма.

Помимо этого, стили могут быть встроены еще несколькими способами.

Подключение внутренней таблицы стилей

Под внутренней таблицей стилей подразумевается отсутствие файла стилей. Свойства таблицы в таком случае вставляются на страницу следующим образом:

<style type="text/css">
	body {
		padding: 0;
	}
	
	/* Другие ваши стили */
</style>

Или краткий вид для HTML5:

<style>
	body {
		padding: 0;
	}
	
	/* Другие ваши стили */
</style>

Здесь особых нюансов нет – вставлять конструкцию можете как в секцию HEAD, так и в BODY. Причем на странице, в разных ее частях может быть несколько таких конструкций.

Подключение встроенной таблицы стилей

Если вы исследовали различные сайты, смотрели, как устроена их верстка, то могли заметить, как стили прописываются непосредственно следующим образом:

<div style="color: #000">Hello, world!</div>

Такой вариант и называется «встроенными стилями», применим ко всем элементам веб-страницы, будь то простой блок, изображение или встроенное видео.

Единственным нюансом здесь является то, что если во внешних или внутренних стилях не используется свойство «!important» – встроенное свойство является приоритетным по исполнению. Что это значит? Приведу простой пример:

<div style="color: #000">Hello, world!</div>

<style>
	div {
		color: red;
	}
</style>

Несмотря на то, что во внутренних стилях мы задали цвет фразы красный – она будет черной, так как это указано во встроенных стилях.