The CSS syntax

The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value.

You don't need to remember this in order to code CSS. Once you start coding CSS, you'll do so without thinking "this is a selector" or "that is a property". This should begin to make sense once you study the examples on this page.

Syntax:

selector { property: value }

The selector is often the HTML element that you want to style. For example:

h1 { color: blue }

This code tells the browser to render all occurences of the HTML h1 element in blue.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

h1,h2,h3,h4,h5,h6 { color: blue }

Applying Multiple Properties

To apply more than one property separate each declaration with a semi-colon.

h1 { color:blue; font-family:arial,helvetica,"sans serif" }

Readability

You can make your CSS code more readable by spreading your style declarations across multiple lines. You can also indent your code if you like. This doesn't affect how your code is rendered - it just makes it easier for you to read.

h1 {
 color:blue;
 font-family:arial,helvetica,"sans serif";
 font-size:150%;
}

OK, so you've now learned about the CSS syntax. But how do you incorporate this syntax into your website? The next lesson will show you how to incorporate CSS into your HTML documents.

• << Previous
• Next Lesson >>