CSS Syntax Overview

At its core, CSS is about setting properties to specific values. Looking at our styles.css file, we see we selected our H1 element and gave it a color of blue. Fundamentally, this is how CSS is always written: you select the element you want to style, add curly braces, and inside those curly braces set properties to specific values.

h1 {
  color: blue;
}

h1 {
  color: blue;
}

So, for example in this case:

H1 is a selector
color is a property
blue is a value

The property and the value together are referred to as a declaration.
The curly braces and everything inside them are referred to as a block.
The entire thing, from the selector down to the closing curly brace, is a rule set.

Also, if we look closer at our declaration, we see a colon : after the property — this is required to assign a value. After the value there's a semicolon ; declarations should end with a semicolon to close them, otherwise subsequent declarations might not be read by the browser.

Comments in CSS

CSS allows comments to improve readability or communicate intent. Comments are ignored by the browser.

To add a comment in CSS, write:

/* This is a comment */

/* This is a comment */

Anything inside that comment is ignored by the browser. For example, writing "hello world" inside a comment has no effect on the page. Usually you want to leave useful comments for future readers, not "hello world" but for this lesson we'll keep it simple.

Comments are meant for humans, not browsers. Always leave meaningful comments that explain why you wrote something, not just what you wrote.

Commenting Out Code

Comments are also useful to temporarily disable code.

If you no longer want a heading to be blue but don't want to delete the declaration, you can comment it out (in many editors you can toggle this with Ctrl + /). For example:

h1 {
  /* color: blue; */
}

h1 {
  /* color: blue; */
}

When saved, the heading will no longer be blue because the declaration is ignored.

Forgetting to close a comment (*/) can break your CSS and cause everything below it to be ignored. Always double-check!

To undo the comment, toggle it again with Ctrl + /. You can also use the editor undo/redo shortcuts: Ctrl + Z to undo and Ctrl + Shift + Z to redo.

If you want to comment out an entire ruleset, select the whole block and press Ctrl + /. The entire rule set will be ignored until you undo that action.

/* h1 {
  color: blue;
} */

/* h1 {
  color: blue;
} */