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.
Let’s take a look at each part in turn:
- Selector: This tells the browser where you want to apply the rule. This example uses the simplest type of selector, a type selector, which redefines the default style of an HTML tag, in this case, a
<p>tag. So, it changes the look of all paragraphs. - Declaration block: This begins with a left curly brace and ends with a right curly brace. You put your style declarations between these braces. Each declaration consists of a property followed by a colon (
:) and value, and ends with a semicolon (;). - Property: This is one of the properties defined in the CSS specification. Most have intuitive names. This one,
margin-left, affects the left margin of the element being styled. Property names are not case-sensitive, but they are normally written entirely in lowercase. - Value: This is the value you want to apply to the property. This example sets the value of the left margin to 40 pixels.
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.