Style Rule Syntax

The Structure of a Rule

Each rule has two basic parts.
  1. Selector (specifies which element, class, or ID receives the style)
  2. Declaration Block (contains one to many declarations with each declaration following the pair syntax of property:value;)
Using the following example:
h2 {background-color:blue; color:orange;}

In the above rule the H2 is the selector.  All H2 elements  will receive the style.  Their are two style declarations defining that the H2 elements will have a background color of blue and text color of orange.  The properties were "background-color" and "color" while the values were "blue" and "orange". If either a property or a value is incorrect the declaration will be ignored.

Multi-value property

For a given declaration property:value pair sometimes the value can contain more than one value keyword.  When a property can have more than one value, the values are separated by a space. Example(the border property can have several value keywords):
H2 {border:solid 1px black;}

Grouping

If you want a rule to be applied to several elements just list all the desired elements in the selector separated by commas. Example (all header elements will get this style):
H1,H2,H3,H4,H5,H6 {background-color:blue; color:yellow; padding:4px;}

Class and ID Selectors

Style can also be directed to elements that have been assigned an ID or Class attribute. The selector syntax for an element with an ID is the # sign followed directly by the ID of the element.  Classes can be referenced by element type plus a perios plus the class name.  Another option on class selectors is to use an asterix before the period wich universally applies the rule to all elements with that class.   Examples:

#navcontainer {padding:8px; margin:0px}  /* ID selector */
div.codeexample {font-family:monospace;} /* class selector */
*.warning {color:red; font-weight:bold;} /* universal class selector */