Comments and whitespace

Learn CSS comments and how to write readable code with indentation.

CSS comments

In CSS, comments are written as /* ... */. Between the opening and closing marks you can put any text; the browser ignores it.

Comments leave explanatory notes in the code: 'this block styles the heading', 'this part is temporary' and so on. A comment at the top of a file says what the file is for. Your teammates — and your future self — will thank you.

Indentation and readability

CSS does not care about whitespace; the browser ignores extra spaces and line breaks. But to the human eye, indented code is far easier to read.

A common practice: put each declaration on its own line, indented by two spaces. Align the curly braces to the same column. That makes it clear where one block ends and the next begins.

Exercise Write a comment and an indented h2 block

Put a /* Heading style */ comment on top, and an h2 block below it. Inside the block, add a color: maroon declaration. Indent the declaration so the code reads nicely.

Show example solution

/* Heading style */
h2 {
  color: maroon;
}

Test yourself

What are CSS comments for?
```
/* body block: default text color */
body {
  color: #222;
}
```
- Compress code to shrink the file size
- Tell the browser which CSS version to use
- Add an external link to the HTML document
- Leave notes in the code; the browser ignores them
Show answer

Leave notes in the code; the browser ignores them — Correct. Comments leave notes in the code; the browser skips them.

Close the CSS comment

/* body block ____
body {
  color: #222;
}

Show answer

/* body block */
body {
  color: #222;
}

Match each mark to its meaning

/* ... */

CSS comment
{ }

wraps declarations
;

declaration separator
Two spaces

common indent

Next lesson: Cascade and inheritance

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies