Изучите X за Y минут

/* Для комментариев используется слэш-астериск, как на этой строчке.
   В CSS нет однострочных комментариев; все комментарии записываются таким способом */

/* ####################
   ## СЕЛЕКТОРЫ
   #################### */

/* Выражения в CSS очень просты */
селектор { атрибут: значение; /* другие атрибуты...*/ }

/* селекторы используются для выбора элементов на странице

Чтобы выбрать все элементы, используйте астериск: */
* { color:red; }

/*
Если на странице присутствует такой элемент:

<div class='some-class class2' id='someId' attr='value' otherAttr='en-us foo bar' />
*/

/* его можно выбрать по одному классу */
.some-class { }

/* или по обоим классам */
.some-class.class2 { }

/* по названию тега */
div { }

/* по идентификатору */
#someId { }

/* по имеющемуся атрибуту */
[attr] { font-size:smaller; }

/* или по атрибуту с определенным значением */
[attr='value'] { font-size:smaller; }

/* можно выбрать атрибуты, начинающиеся с определенного значения (CSS3) */
[attr^='val'] { font-size:smaller; }

/* или заканчивающиеся определенным значением (CSS3) */
[attr$='ue'] { font-size:smaller; }

/* содержащие отделенное пробелами значение в названии атрибута (CSS3)  */
[otherAttr~='foo'] { font-size:smaller; }

/* можно выбрать атрибут как с точным, так и со стоящим после значения “-” (U+002D) */
[otherAttr|='en'] { font-size:smaller; }


/* Более того, все это можно использовать вместе - между разными частями
не должно быть пробелов, иначе селектор будет иметь совершенно иное значение  */
div.some-class[attr$='ue'] { }

/* Вы можете выбрать элемент по его родителю */

/* прямой потомок другого элемента (выбранного с помощью селектора) */
div.some-parent > .class-name {}

/* потомок любого родителя в дереве элементов
   следующая строка означает: "любой элемент класса "class-name",
   являющийся потомком div-элемента класса "some-parent"
   НЕЗАВИСИМО ОТ УРОВНЯ ВЛОЖЕННОСТИ" */
div.some-parent .class-name {}

/* важно: этот же селектор без пробелов имеет иное значение
   можете догадаться, какое? */
div.some-parent.class-name {}

/* вы можете выбрать элемент по первому предшествующему
   родственному элементу */
.i-am-before + .this-element { }

/* или любому предшествующему родственнику перед элементом */
.i-am-any-before ~ .this-element {}


/* Существуют псевдоклассы, позволяющие изменять внешний вид элемента
   в зависимости от событий, произошедших с элементом */

/* например, когда курсор наведен на элемент */
element:hover {}

/* когда пользователь проходил по ссылке ранее */
element:visited {}

/* или еще не проходил по ней */
element:link {}

/* выбранное поле ввода (input) */
element:focus {}


/* ####################
   ## АТРИБУТЫ
   #################### */

selector {
    
    /* Единицы измерения */
    width: 50%; /* проценты */
    font-size: 2em; /* умножается на высоту шрифта (2em - в два раза больше) */
    width: 200px; /* пиксели */
    font-size: 20pt; /* пункты */
    width: 5cm; /* сантиметры */
    min-width: 50mm; /* миллиметры */
    max-width: 5in; /* дюймы */
    height: 0.2vh; /* умножается на высоту окна браузера (CSS3) */
    width: 0.4vw; /* умножается на ширину окна браузера (CSS3) */
    min-height: 0.1vmin; /* наименьшее из vh и vw (CSS3) */
    max-width: 0.3vmax; /* наибольшее из vh и vw (CSS3) */
    
    /* Цвета */
    background-color: #F6E;  /* сокращенная запись шестнадцатеричного кода */
    background-color: #F262E2; /* стандартная запись шестнадцатеричного кода */
    background-color: tomato; /* название цвета */
    background-color: rgb(255, 255, 255); /* цветовая модель rgb */
    background-color: rgb(10%, 20%, 50%); /* цветовая модель rgb в процентах */
    background-color: rgba(255, 0, 0, 0.3); /* цветовая модель rgb (последний аргумент отвечает за прозрачность цвета) (CSS3) */
    background-color: transparent; /* прозрачный цвет */
    background-color: hsl(0, 100%, 50%); /* в формате hsl (CSS3) */
    background-color: hsla(0, 100%, 50%, 0.3); /* в формате hsl (последний аргумент отвечает за непрозрачность цвета) (CSS3) */

    
    /* Изображения */
    background-image: url(/path-to-image/image.jpg); /* кавычки внутри url() опциональны */
    
    /* Шрифты */
    font-family: Arial;
    font-family: "Courier New"; /* если в названии есть пробелы, заключите его в кавычки */
    font-family: "Courier New", Trebuchet, Arial, sans-serif; /* если шрифт не найден,
                             будет использован следующий за ним в списке */
}

<!-- добавьте css файл в тег <head> на странице: -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' />

<!-- Можно использовать встроенные стили. Рекомендуется избегать подобного подхода. -->
<body>
  <style>
     a { color: purple; }
  </style>
</body>

<!-- Можно установить стиль элемента напрямую.
Используйте этот способ только в случае крайней необходимости. -->
<div style="border: 1px solid red;">
</div>

/*A*/
p.class1[attr='value']

/*B*/
p.class1 {}

/*C*/
p.class2 {}

/*D*/
p {}

/*E*/
p { property: value !important; }

<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>