Прежде всего, неплохо было бы ознакомиться с тем, что такое CSS и как он используется. Я создал еще одну статью, посвященную этой теме. Вот ссылка, по которой можно узнать больше о CSS и о том, как его использовать
Синтаксис CSS
Правила стиля в CSS интерпретируются браузером и затем применяются к соответствующим элементам в вашем документе.
Правило стиля состоит из трех частей: селектора, свойства и значения.
Например, цвет заголовка может быть определен как:
h1 { color: blue; }
Селектор указывает на элемент HTML, который нужно стилизовать.
Одно или несколько объявлений содержатся в блоке объявления и разделяются точкой с запятой.
Двоеточие отделяет имя свойства от значения в каждом объявлении.
Селекторы типов
Селекторы типов являются наиболее широко используемыми и простыми для понимания селекторами. Этот селектор нацелен на определенные типы элементов страницы.
Например, для выделения всех абзацев на странице:
p {
text-align: center;
color: red;
font-size: 18px;
}
Здесь все элементы <p> на странице будут выровнены по центру, цвет текста будет красный, а размер шрифта 18px.
Селекторы Id и Class
Селекторы Id
Независимо от того, где они находятся в дереве документа, селекторы id позволяют стилизовать элемент HTML, имеющий атрибут id. id элемента уникален в пределах страницы, поэтому селектор id используется для выбора одного уникального элемента!
Пример селектора id показан здесь:
<div id=“unique”>
<p> This paragraph is in the intro section.</p>
</div>
<p> This paragraph is not in the intro section.</p>
#unique {
color: white;
background-color: coral;
}
Используйте хэш-символ (#), за которым следует id элемента, чтобы выбрать элемент с указанным id.
Селекторы классов
Аналогичные принципы применяются к селекторам классов. Основное различие между ними заключается в том, что классы могут использоваться на странице столько раз, сколько необходимо, а идентификаторы могут применяться только один раз на странице.
<div>
<p class=“first”>This is a paragraph</p>
<p> This is the second paragraph. </p>
</div>
.first {font-size: 30px;}
Используйте символ точки (.), за которым следует имя класса, чтобы выбрать элементы, принадлежащие этому классу.
Имя класса или идентификатора НЕ должно начинаться с цифры!
Селектор группировки CSS
Все наши селекторы до этого момента были ориентированы только на один класс, идентификатор или элемент. Но в CSS несколько элементов могут быть выбраны и оформлены коллективно с помощью селектора группировки CSS. Объявление общих стилей для каждого элемента экономит время и минимизирует количество необходимого кода. Каждый селектор отделяется от других запятой.
В этом примере мы сгруппировали селекторы:
h1, h2, p {
text-align: center;
color: orange;
}
Полный список всех различных типов селекторов приведен в справочнике MDN Web Docs CSS selectors.