Синтаксис CSS

Селектор и блок деклараций — две части любого правила CSS.

Селектор выбирает HTML-элемент для стилизации.

Фигурные скобки заключают блок деклараций, который содержит одну или несколько деклараций с точкой с запятой между ними.

Декларация связывает имя свойства CSS со значением, разделяя их двоеточием.

Пример

Это правило выравнивает каждый элемент <p> по центру и окрашивает его текст в красный цвет.

Веб-страница с CSS в блоке `<style>`, который применяется ко всем элементам `<p>`.

Сделайте каждый абзац красным и выровненным по центру. Добавьте несколько абзацев, чтобы правило было заметно.

> Результат: полная HTML-страница

Prompt

Веб-страница с CSS в блоке <style>, который применяется ко всем элементам <p>. Сделайте каждый абзац красным и выровненным по центру. Добавьте несколько абзацев, чтобы правило было заметно.

Результат: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Syntax Example</title>
<style>
p {
  color: red;
  text-align: center;
}
</style>
</head>
<body>

<p>Every paragraph on this page is red and centered.</p>
<p>This is another paragraph styled by the same CSS rule.</p>

</body>
</html>

Объяснение примера

Селектор — p, поэтому правило направлено на HTML-элемент <p>.
Свойство color имеет значение red.
Свойство text-align имеет значение center.

В следующих главах селекторы и свойства CSS рассматриваются гораздо подробнее.