CSS Syntax

CSS Syntax

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more style declarations.

Basic CSS Rule Structure

A CSS rule follows this basic structure:

selector {
  property: value;
}

The selector selects the HTML element, the property defines what you want to change, and the value specifies how it should be changed.

Example Explained

In the example below, all paragraph elements are styled:

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

• p is the selector
• color and font-size are properties
• blue and 16px are values

Multiple Declarations

A declaration block can contain multiple declarations. Each declaration must be separated by a semicolon.

div {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
}

CSS Syntax Rules

• Each declaration must end with a semicolon
• Property names are case-insensitive
• Values may be numbers, keywords, colors, or functions
• Curly braces { } define the declaration block

Whitespace and Readability

Whitespace does not affect how CSS works, but it improves readability. Well-formatted CSS is easier to read and maintain.

h1{color:red;}p{color:blue;}

The same CSS written in a more readable format:

h1 {
  color: red;
}

p {
  color: blue;
}

Comments in CSS

Comments are used to explain code and are ignored by the browser.

/* This is a CSS comment */
p {
  color: green;
}

What’s Next?

Now that you understand the basic syntax of CSS, the next step is to learn how selectors work to target specific HTML elements.