Basic syntax – CSS

Summary

CSS pseudocode:

selector {
  property: value;
  property: value;
  property: value;
}

Details

CSS files are made up of rule sets, like the example above. Each rule set starts with a selector that targets one or more elements in your HTML file. NOTE: The terms selector, property, and value are being used as placeholders below and shouldn’t be used directly in your code.

selector

The selector is followed by a pair of curly braces.

selector {

}

Inside the curly braces, you have your list of one or more declarations. A declaration consists of a property, a colon followed by a space, the value(s) for the property, and a semicolon. Declarations are usually indented two spaces inside the curly braces (though indentation is technically not required for your code to work).

selector {
  property: value;
}

Some properties accept multiple values. Depending on the property, the values will be separated by a space or a comma and a space.

selector {
  property: value value;
}

selector {
  property: value, value;
}

If you want to change multiple properties, put each property and its value(s) on separate lines.

selector {
  property: value;
  property: value;
  property: value;
}

Multiple rule sets are separated by one or more blank lines.

selector-one {
  property: value;
  property: value;
}

selector-two {
  property: value;
  property: value;
}

Here is an example showing what a couple of CSS rule sets look like:

h1 {
  background-color: blue;
}

p {
  color: red;
  font-family: Arial, sans-serif;
  font-size: 20px;
}

VS Code Tip

VS Code will offer suggestions as you type below your cursor. For example, if you start typing the property border, you will see a menu pop up with several suggestions, such as border, border-radius, border-bottom, and more. You can use the arrow keys to select the one you want and then press Enter or Tab to generate the tags for that option. You can also use your mouse to click on the option you want.

If you don’t see the list of suggestions, you can use Ctrl+Space to bring up the list of suggestions.

Exercises

There are no exercises for this lesson.

References

CSS basics on MDN

Back to: CSS Reference > CSS Syntax