CSS Syntax

CSS syntax is the set of rules that defines how CSS code must be written so the browser can understand and apply it correctly. Every CSS rule follows a fixed structure made up of three parts: a selector, a property, and a value.

Structure of a CSS Rule

A CSS rule looks like this:

selector {
    property: value;
}

• Selector – Tells the browser which HTML element to style. Example: p, h1, .classname, #idname
• Property – The visual characteristic to change. Example: color, font-size, background-color
• Value – The actual setting for that property. Example: red, 20px, yellow
• Curly braces { } – Wrap around all property-value pairs for that selector.
• Colon : – Separates the property from its value.
• Semicolon ; – Ends each property-value pair. It is good practice to always include it.

Example of a Basic CSS Rule

h1 {
    color: blue;
    font-size: 32px;
}

In this example, the selector is h1. The two properties being set are color and font-size. The color is set to blue and the font size is set to 32 pixels. This rule tells the browser: "Make all H1 headings blue and 32px in size."

Multiple Properties in One Rule

Multiple properties can be added inside a single CSS rule block. Each property must end with a semicolon.

p {
    color: black;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

This rule styles all paragraph elements with black text, 16px size, comfortable line spacing, and centered alignment.

Multiple Selectors with the Same Style

When two or more elements need the same styles, they can be grouped together using a comma.

h1, h2, h3 {
    color: darkgreen;
    font-family: Arial;
}

Instead of writing three separate rules, this single rule applies the same styles to all three heading levels at once.

CSS is Not Case-Sensitive (mostly)

CSS property names and values like color, background-color, red, and px are not case-sensitive. However, values that refer to file names or custom identifiers (like class names and IDs) can be case-sensitive. It is best practice to always write CSS in lowercase to avoid confusion.

Whitespace and Formatting

Extra spaces, tabs, and blank lines in CSS are ignored by the browser. This means CSS can be written in a compact way or spread out for better readability — both work the same.

Compact Format

p { color: red; font-size: 14px; }

Readable Format (Recommended)

p {
    color: red;
    font-size: 14px;
}

The readable format is strongly recommended, especially when writing many CSS rules.

CSS Comments

A comment in CSS is a note written in the code that the browser ignores. It is useful for explaining what a CSS rule does. Comments are covered in detail in the next topic.

/* This rule styles all paragraphs */
p {
    color: gray;
}

Summary

A CSS rule always follows the pattern: selector → property → value. Every property must be followed by a colon and end with a semicolon. Multiple properties can exist in one rule, and multiple selectors can share one rule using a comma. Writing CSS in a clean, indented format makes it much easier to manage as the stylesheet grows.