The CSS Syntax

The CSS syntax defines how we write rules to set the style of HTML elements. Understanding the syntax is essential for the effective use of CSS.

The Structure of a CSS Rule

A CSS rule consists of a selector and a declaration block. The declaration contains properties and their values, which define the style of the element.

Selectors in CSS

With selectors we choose which HTML elements we apply the rules to. The most common ones are element, class, and id selectors.

Element Selector

The element selector directly refers to the HTML element by name, for example every <p> element.

Class Selector

The class selector applies to elements with a specific class attribute and always starts with a dot.

ID Selector

The id selector applies to an element with a unique identifier and always starts with a hash (#).

Multiple Declarations in One Rule

A CSS rule can contain multiple declarations that precisely define the appearance of the element.

/* Choose the correct selector type */
#id {
  background-color: yellow;
}

Tips for Using CSS Syntax

The correct use of syntax helps to write clean and easily maintainable CSS code.

• Always close declarations with a semicolon to avoid errors.
• Use indentation and line breaks for readability.
• Choose descriptive class names so that other developers can also easily understand the code.