CSS syntax

CSS, like (X)HTML is written in plain text. Here’s a quick snippet: 

body {
	background-color: teal;
	color: white;
}

This sets two properties for the body element for any HTML documents that refer to this file. It sets the background-color (sorry about the US spelling) to teal (a sort of dull green-blue) and the foreground colour (color) to white.

Declarations like this follow a few rules:

  1. The element (or class or ID name, more on this later) is specified first, followed by an opening brace (curly bracket).
  2. Properties are followed by a colon then the value.
  3. A semicolon is used to separate the value from the next property. The semicolon at the end of the last value is optional, but good practice.
  4. As in HTML, white space is not critical. You should not put line breaks within a property declaration, however.
  5. Declarations finish with a closing brace.

So the above example could be condensed to this: 

body { background-color: teal; color: white }

…but for longer declarations involving more properties, the former version would definitely be a lot clearer.

That’s a very basic introduction. Let’s incorporate this into a complete HTML+CSS example—to do this, we need to find out how to link a CSS file to an HTML file…