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.









