CSS расшифровывается как Cascading Style Sheets и в переводе с английского означает каскадные таблицы стилей.

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

Строчные стили

Попробуем с самого простого. В базовом случае, мы можем добавить любому HTML тегу атрибут style и внутри него применить нужные нам стили.

Представим, что у нас есть параграф и нам необходимо сделать цвет текста красным. Вот как это можно сделать:

<p style="color: red">Этот текст - красный</p>

Такой способ задания стилей называется встроенным или строчным (inline). Он применяется только к одному тегу. Если у нас будут другие теги <p>, цвет текста внутри них никак не изменится.

Для того чтобы изменить цвет текста, мы использовали атрибут style со значением color: red. Это — строка стилей. Внутри нее можно указать множество свойств стилей, одно из них color.

Свойства, как и атрибуты, состоят из двух частей: имени и значения, которые указываются через двоеточие (:). В данном примере имя свойства - color, с помощью него задается цвет текста. Значение стиля red указывает, что цвет должен быть красным.

Если мы хотим, чтобы цвет текста стал зелёным, нам надо просто поменять значение свойства на green:

<p style="color: green">Этот текст - зеленый</p>

— А что если нам надо поменять не только цвет текста, но и размер шрифта?

— Чтобы добавить несколько свойств в строку стилей, нужно перечислить их через точку с запятой (;). Размер шрифта можно изменить с помощью css свойства font-size.

<p style="color: red; font-size: 16px;">Этот текст - красный. Его размер 16px.</p>

Как и в случае с цветом, для того, чтобы изменить размер шрифта, мы указали имя свойства (font-size), и, после двоеточия (:), добавили значение 16px.

Размер шрифта необязательно должен быть в пикселях. Например, мы можем привязать размер шрифта вложенного тега к размеру шрифта родительского тега. Сделать это можно, указав размер шрифта не в px, а в %.

<p style="font-size: 16px;">
	Это родительский параграф. Размер шрифта - 16px;
  <b style="font-size: 50%;">А это вложенный тег, размер шрифта - 50% от родительского. То есть 8px.</b>
</p>

Мы привязали размер шрифта для текста внутри тега <b> к размеру шрифта родительского тега <p>. Соответственно, размер текста внутри тега <b> будет составлять 8px, половина от 16px.

Выделение строчных элементов

Текст можно делать жирным не только с помощью тега <b>, а и с помощью css свойства font-weight. Для этого необходимо установить его в значение bold. Давай немного улучшим предыдущий пример:

<p style="font-size: 16px;">
	Это родительский тег, размер его шрифта равен 16 px;
  <span style="font-size: 50%; font-weight: bold">А это вложенные тег, размер его шрифта указан в процентах и равен 50% от родительского</b>
</p>

— Ой, а я не помню, что бы рассматривали тег <span>.

— Мы действительно его не рассматривали, потому что без стилей этот тег не особо интересен.

Тег <span> отлично подходит для выделения кусочков текста, при использовании стилей. Сам по себе он не изменяет текст (в отличие от <b> или <i>). Но мы можем добавить ему любые стили для форматирования текста:

<p>
	Начало параграфа. Обычный текст.
  <span style="font-size: 16px; font-weight: bold; color: blue">Выделенный текст.</span>
  Продолжение параграфа.
</p>