Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

Блок . Как работать с CSS

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

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

Давайте покрасим все абзацы в красный цвет:

Это HTML код:

<p>
	Абзац с текстом.
</p>

Это CSS код:

p {
	color: red;
}

Так код будет выглядеть в браузере:

Абзац с текстом.

А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:

<p>
	Абзац с текстом.
</p>
p {
	color: red;
	font-size: 25px;
}

Так код будет выглядеть в браузере:

Абзац с текстом.

Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.

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

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

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

Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.

Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.

Давайте разберемся с этими способами более подробно.

Способ 1. Отдельный CSS файл

Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.

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

Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel="stylesheet" href="путь к CSS файлу">.

Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.

В следующем примере к нашему HTML файлу подключается CSS файл style.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<p>
			Это абзац с текстом.
		</p>
	</body>
</html>

Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
		<link rel="stylesheet" href="style1.css">
		<link rel="stylesheet" href="style2.css">
		<link rel="stylesheet" href="style3.css">
	</head>
	<body>
		<p>
			Это абзац с текстом.
		</p>
	</body>
</html>

Способ 2. CSS внутри тега style

Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл </title>
		<style>
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			Это абзац с текстом.
		</p>
	</body>
</html>

Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.

Правило такое: если что-то можно сделать первым способом, то использовать второй способ - дурной тон.

Способ 3. CSS внутри атрибута style

Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<p style="color: red; font-weight: bold;">
			Это абзац с текстом.
		</p>
	</body>
</html>

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

Впрочем, иногда без второго и третьего способа не обойтись.

Блок . Комментарии CSS

Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:

p {
	/*
		Тут находится
		комментарий CSS.
	*/

	color: red;
	font-size: 27px;
}

Видео про CSS

Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).