CSS Syntax

CSS syntax is the set of rules that defines how CSS code is written. Every CSS rule consists of a selector and a declaration block. Understanding CSS syntax is the foundation of styling web pages.

Basic CSS Syntax Structure

A CSS rule is made up of three main parts: a selector, a property, and a value.

Selector

Declaration

{ color:red; font-size:15px; }

Property

Value

Property

Value

Selector – selects the HTML element
Property – defines what you want to style
Value – specifies how the property should look

Example of CSS Syntax

The following example styles all paragraph elements by changing their color and font size.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: green;
  font-size: 22px;
}
</style>
</head>
<body>

<p>This is a CSS example.</p>

</body>
</html>

Try this code

Example Explained

p is a CSS selector that selects <p> elements.
color is a CSS property that defines the text color, and green is its value.
font-size is a property that controls the text size,and 22px is its value.

CSS Syntax Rules

Each declaration must end with a semicolon (;)
Properties and values are separated by a colon (:)
Declaration blocks are enclosed in curly braces { }
CSS is generally written in lowercase for readability

Common Mistakes in CSS Syntax

Forgetting semicolons
Using incorrect property names
Missing curly braces
Writing invalid values

Tip: Always validate your CSS syntax. A single syntax error can break the entire stylesheet.