Порядок применения правил CSS

Для корректной работы с указанными правилами CSS в документе должна быть декларация DOCTYPE современной версии HTML. Иначе страница будет отображаться в индивидуальном режиме (backwards-compatibility mode). Всегда пиши в первой строке HTML-файла:
```
<!DOCTYPE html>
```
Внешние листы стилей, подключаемые в элементе link:
```
<link rel="stylesheet" href="style.css">
```
сервер должен передавать с MIME-типом text/css (всегда верно для правильно настроенного хостинга)
Наследование контролирует, что происходит, если значение свойства элемента не определено.

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

.news { color: black; }
.name { font-weight: bold; color: red; }

<div class="news">
   (ТАСС) <span class="name">Роскосмос</span> опубликовал пресс-релиз...
</div>

Порядок следования правил в листах стилей важен. При явном переопределении правила используется последнее. «Роскосмос» будет синим:

.news { color: black; }
.name { font-weight: bold; color: red; }
/* Какие-то правила */
.name { font-weight: normal; color: blue; }

<div class="news">
   (ТАСС) <span class="name">Роскосмос</span> опубликовал пресс-релиз...
</div>

Если один элемент соответствует нескольким правилам: правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка. Это называется Специфичность: способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены.
Взаимное расположение элементов, указанных в селекторе не влияет на специфичность правила.
Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет.
Отрицающий псевдокласс :not не учитывается как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри :not, при подсчете количества по типам селекторов рассматриваются как обычные селекторы и учитываются. Пример.
Если для элемента HTML-разметки (тега) не подходит ни одно из указанных правил CSS (или каскадные листы стилей в документе отсутствуют) и не наследуется, то применяются начальные значения. Начальное значение дано в кратком описании каждого CSS свойства и имеет различное значение для наследуемых и не наследуемых свойств. Например, заголовок 1-го уровня <h1> будет отображен как блочный элемент полужирным начертанием с внешними отступами сверху и снизу, равными 0.67em:
```
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-weight: bold;
```
Если требуется восстановить начальное значение свойства стиля (стиль по умолчанию), используется ключевое слово initial. Восстановление размера шрифта заголовка 1-го уровня до значения 2em:
```
h1 {
  font-size: initial;
}
```

Наследуемые свойства

Когда никакого значения для свойства, которое наследуется, у элемента не установлено, элемент получает вычисленное значение этого свойства от его родителя. Только корневой элемент документа получает начальное значение из описания свойства.

Типичный пример наследуемого свойства color. Подчёркнутый текст будет зеленым:

p { color: green }

<p>В этом параграфе <em>подчёркнутый текст</em>.</p>

Ненаследуемые свойства

Когда значения свойства элемента, которое не наследуется, не указано, элемент получает начальное значение этого свойства (как указано в описании свойства).

Пример ненаследуемого свойства border. Подчёркнутый текст не будет иметь рамки, т.к. начальное значение border-style: none:

p { border: medium solid }

<p>В этом параграфе <em>подчёркнутый текст</em>.</p>

Ключевое слово inherit позволяет явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.