The CSS Rule Sets, Declaration Blocks and Selectors - How To Write A CSS Style

Guest Author - Diane Cipollo

In this tutorial we will discuss the code that you will use to override the default style of the web browser and HTML tags. You will place this code between the opening <style type="text/css"> and closing </style> tags. Then place this in the head section of your webpage. Let's take a look at the code.

Basic CSS Code

Example

Selectors

The selector controls where the style is applied. In the example above, the p in the HTML <p> paragraph tag is the selector that tells the browser to apply a style to everything between the opening <p> tag and the closing </p> tag.

Properties

font-size

The property is the parameter or attribute that is being controlled by the style. In our example, there are three properties. They are the font size (font-size), color and text alignment (text-align).

Values

12pt

The value assigned to a property tells the browser how to display that property. In our example, the font-size property is set to 12 points, the color property is set to black (#000000) and the text alignment property is set to center. All this will cause the text between the opening and closing <p> tags to be 12 points in size, black in color and centered.

When coding your styles remember these few specifications.

A property-value pair is called a declaration or definition (color: black)
All of the declarations for one selector should be placed together between curly brackets {}. This is called a declaration block.
A selector and declaration block is called a rule.
Each selector should begin on a separate line.
Separate the property from its value with a : colon (color: black)
If a value has more than one word, place the value between quotation marks ("Comic Sans MS")
Separate each declaration with a ; semicolon.