CSS Syntax

CSS Syntax

CSS is written as a collection of rules that tell the browser which HTML elements to style and how those elements should appear. A basic CSS rule consists of a selector and a declaration block containing one or more property-and-value pairs.

A Basic CSS Rule

A basic CSS rule looks like this:

p {
  color: blue;
}

This rule tells the browser to display the text inside <p> elements in blue.

The rule has two main parts: the selector and the declaration block.

The CSS Selector

The selector identifies the HTML element or elements that the CSS rule will style.

p {
  color: blue;
}

In this example, p is the selector. It selects <p> elements.

Other HTML elements can also be used as selectors:

h1 {
  color: #0088cc;
}

This rule selects <h1> elements.

The Declaration Block

The declaration block contains the styling instructions for the selected elements. It begins with an opening curly brace ({) and ends with a closing curly brace (}).

p {
  color: blue;
}

Everything between the curly braces is part of the declaration block.

CSS Properties and Values

Each CSS declaration contains a property and a value separated by a colon (:).

color: blue;

In this declaration:

• color is the property.
• blue is the value.

The property identifies what will be changed, while the value specifies how it will be changed.

A semicolon (;) is normally placed at the end of each declaration.

Using Multiple Declarations

A CSS rule can contain more than one declaration. Each declaration controls a different aspect of the selected element.

p {
  color: blue;
  font-size: 18px;
  background-color: #f5f5f5;
}

This rule gives paragraphs blue text, an 18px font size, and a light gray background.

Spacing and Formatting CSS

Browsers generally ignore extra whitespace in CSS, so the same rule can be written in different ways.

For example, this CSS works:

p { color: blue; font-size: 18px; }

For tutorials and stylesheets, placing each declaration on its own line usually makes the CSS easier to read and edit:

p {
  color: blue;
  font-size: 18px;
}

Common CSS Syntax Mistakes

Forgetting the Colon

A colon separates a property from its value.

/* Incorrect */
color blue;

/* Correct */
color: blue;

Forgetting the Semicolon

Declarations should be separated with semicolons. Using a semicolon after every declaration also makes it easier to add another declaration later.

p {
  color: blue;
  font-size: 18px;
}

Forgetting a Curly Brace

The declaration block must be enclosed by matching opening and closing curly braces.

p {
  color: blue;
}

Using an Invalid Property or Value

If a browser does not recognize a CSS declaration, it normally ignores that declaration. Other valid declarations in the rule can still be applied.

Summary

A CSS rule consists of a selector followed by a declaration block. The selector identifies which HTML elements will be styled, while declarations contain properties and values that control their appearance.

Understanding this basic structure makes CSS much easier to read. Next, you will learn the different ways CSS can be added to an HTML document.