Очень кратко о CSS

Подгрузить файл css стилей:

@import url("имя файла");
@import "имя файла";

Импорт стилей по типам:

@import "style/main.css" screen; /* Стиль для вывода результата на монитор */
@import "style/print.css" print, handheld; /* Стиль для печати и смартфона */

Пример @media:

@media print { /* Стиль для печати */
   BODY {
      font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
   }
   H1, H2, P {
      color: black; /* Черный цвет текста */
   }
}

@media (max-width: 767px) {
   .hidden-desktop {
      display: inherit !important;
   }
}

@media (min-width: 767px) {
   .hidden-desktop {
      display: inherit !important;
   }
}

@media (min-width: 768px) and (max-width: 979px) {
   .row {
      margin-left: -20px;
   }
}

Селекторы тегов:

p {
   text-align: justify;
}
div {
   text-align: justify;
}

Селектор классов:

.class {
   text-align: justify;
}

Идентификаторы:

#ident {
   text-align: justify;
}

Смешанное использование:

div#ident.class1.class2 {
   text-align: justify;
}

Соседний селектор:

Селектор 1 + Селектор 2 { Описание правил стиля }

Дочерние селекторы:

Селектор 1 > Селектор 2 { Описание правил стиля }

Первый дочерний элемент:

.class1 > .class2:first-child { Описание правил стиля }

Стиль первого символа в тексте элемента:

.class1:first-letter { Описание правил стиля }

Стиль первой строки блочного текста:

.class1:first-line { Описание правил стиля }

 

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Суммируя указанные значения, получим значение специфичности для данного селектора.

* {} /* a=0 b=0 c=0 -> специфичность = 0 */
li {} /* a=0 b=0 c=1 -> специфичность = 1 */
li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */
ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */
li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */
#t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает
связанные и глобальные стили. Однако добавление !important перекрывает в том числе и встроенные стили.