The CSS Syntax: How to Write It

Free CSS Developer Roadmap 2026 CSS roadmap for beginners Learn CSS step by step roadmap Responsive CSS learning path

A complete FREE CSS Developer Roadmap to master layouts, responsiveness, and animations.

CSS Syntax is the basic structure used to style elements on a web page.

Writing CSS is like giving instructions to a painter. You point to something on the page and then describe how it should look.

Each instruction follows a clear and predictable pattern, which makes CSS easy to read and maintain once you understand the syntax.

Writing CSS is like giving instructions to a painter. You point at something on the page (the Selector) and then tell the painter what to change about it (the Declaration).

The Anatomy of a CSS Rule

A standard “rule” looks like this:

CSS

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

Selector: This points to the HTML element you want to style (e.g., h1, p, or button).
Declaration Block: Everything inside the curly braces { }.
Property: The feature you want to change (e.g., color, background-color, margin).
Value: The specific setting you want for that property (e.g., blue, 10px).

Crucial Rule: Always put a colon (:) between the property and the value, and end every declaration with a semicolon (;). If you forget that semicolon, the next line of code won’t work!

2. CSS Selectors: Choosing Your Target

You don’t always want every single paragraph on your site to look the same. There are three main ways to target elements:

Selector Type	What it looks like	What it does
Element	`p { ... }`	Targets all paragraph tags on the page.
Class	`.highlight { ... }`	Targets elements with `class="highlight"`. Use a dot `.`
ID	`#header { ... }`	Targets a unique element with `id="header"`. Use a hashtag `#`

3. CSS Comments: Leaving Notes for Yourself

As your website grows, your CSS file can get hundreds of lines long. Comments are notes that you write in the code that the browser ignores. They are for humans, not computers.

Why use comments?

To explain why you wrote a specific piece of code.
To organize your file into sections (e.g., “Navigation Styles,” “Footer Styles”).
To temporarily “turn off” code while testing things out.

How to write a comment

In CSS, comments always start with /* and end with */.

CSS

/* This is a single-line comment */

p {
  color: red; /* Set the text color to red */
}

/* This is a multi-line comment.
   Use this for long explanations
   or to group sections of code. 
*/

4. Pro-Tips for Clean CSS

Indentation: Always put your declarations on a new line and indent them. It makes the code much easier to read.
Lowercase: While CSS isn’t strictly case-sensitive for everything, it is standard practice to write all selectors and properties in lowercase.
Don’t Over-Comment: You don’t need to explain that color: blue makes text blue. Use comments for the “Why,” not the “What.”