CSS Ruleset Explained – What Is a CSS Ruleset?

A CSS ruleset consists of an element selector and a properties declaration block.

Here’s an illustration:

CSS ruleset equals selector plus declaration block

Note the following:

• A selector selects HTML elements. In other words, developers use CSS selectors in a stylesheet to select the HTML elements they which to style.

• A declaration block ({...}) groups one or more CSS declarations separated by semicolons (;).

• A CSS declaration consists of a CSS property name and value separated by a colon (:).

• It is best to use a semicolon after each declaration (including the last one) to prevent forgetting to add it in the future when adding more properties.

Example: Declare Red Text Color for All <div> Elements

div {
  color: red;
}

Try it on StackBlitz

In the above snippet,

• div is the CSS selector that selects the HTML <div> elements we wish to style.
• color: red; is the CSS declaration that declares the style we wish to apply to the <div> element.
• color is the declaration’s property name.
• red is the declaration’s property value.