Skip to main content

Getting StartED with CSS

How Do I Write a Style Rule?

Creating a style rule with CSS is very simple. The following illustration shows the anatomy of a basic style rule that puts a 40-pixel margin on the left of every paragraph.

p { margin-left: 40px; }

Let’s take a look at each part in turn:

There’s a full list of all CSS2.1 visual and print properties and their permitted values in this site’s reference section. Each chapter in Getting StartED with CSS also has handy tables to remind you of the properties used to style different parts of a web page. The various types of selectors you can use are also described in the reference section of this site.

Note that the property is separated from the value by a colon (:), and the value is followed by a semicolon (;). Forgetting the colon or semicolon (or getting them the wrong way round) is a common beginner’s mistake. Check them if your styles aren’t applied.

The declaration block in this example contains only one property/value pair, but you can define any number of properties in the same declaration block.

CSS comments

It’s often useful to add comments to your style rules. Anything between /* and */ is treated as a comment in CSS. For example, you could add a comment to the previous example like this:

/* This puts a 40px left margin on all paragraphs */ p { margin-left: 40px; }

Comments can be spread over several lines like this:

/* This is a long CSS comment that stretches over several lines. It doesn't matter what you put in it. Everything between the comment markers is ignored by the browser. */

So, where do I create these rules?

The next page describes how to apply CSS to your web pages.