Supported by :   My Law Forms Ltd. - Company Formations, Deed polls and Tenancy Agreements

CSS Basics - Structure of CSS style definitions.

The basic building blocks of CSS are rule sets. Each rule set is comprised of a selector and a declaration block. Each declaration block has zero or more declarations, or styles. Here is a basic rule set:

p {
background-color:#ffcc00;
font-size:120%
}

The selector is the element that is being styled, in this case it is the p element. If this selector was limited to a p elements of a particular class, for example someClassName, this would be written as :

p.someClassName { … }

A further refinement would be to limit this selector to a particluar element id, such as someIDName :

p#someIDName { … }

Multiple selectors can be included for a single declaration by separating them with a comma :

p,
p.someClassName,
p#someIDName { … }

Another selector which can be used is the wildcard ‘*’. The following example selector would be applied to ALL elements within p.someClassName :

p.someClassName * { … }

The example rule set above will add a background color to all paragraphs and increase their font size by 120%.

The declaration block is everything between the curly braces “{…}”. This rule set has two declarations within the declaration block, each with a property and a value. The properties come before the colon and the values come after the colon, so our first property is background-color and it has a value of #ffcc00 (a hex color value). It is possible to many declarations for a given selector.

This entry was posted on Tuesday, July 24th, 2007 at 11:32 am and is filed under CSS Tips, XHTML tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply