Supported by :   My Law Forms Ltd. - 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. Both comments and pings are currently closed.

Comments are closed.