CSS Anatomy

Before diving into the details of CSS syntax and selectors, it's important to understand the basic structure and terminology of CSS.

CSS Rules

At its core, CSS consists of a series of "rules," each of which defines how a set of HTML elements should be styled.

A rule consists of two parts: a selector and a declaration block. The selector identifies which HTML element(s) should be styled, and the declaration block contains one or more "declarations" that specify the desired styles for those element(s).

1selector {
2  property: value;
3  property: value;
4  /* additional properties and values... */
5}

For example, the following CSS rule would style all <h1> elements to have a red text color:

1h1 {
2  color: red;
3}

Properties and Values

Each declaration in a CSS rule consists of a "property" and a "value." CSS provides a wide range of properties that can be used to style different aspects of HTML elements, from setting the text color to controlling the layout of the page.

1selector {
2  property: value;
3}

For example, to set the text color of all <p> elements to blue and the background color to yellow, you could use the following CSS rule:

1p {
2  color: blue;
3  background-color: yellow;
4}