Uncle Bacon: A site developed by Brian Treese and hosted by Couto Solutions

CSS Quick Start - Syntax

CSS syntax is simple but requires some attention. Stylesheets are a list of Styles that contain Rule Sets consisting of Selectors with thier corresponding style Properties and Values. They are denoted in the following manner:

Selector
{
    property: value;
}

The selector is defined then the rule set is opened with a ({) and closed with a (}). The property and it's value are seperated by a (:) and the value is closed by a (;).

CSS Comments can be used and are often useful to debug CSS, section out your stylesheets, and keep them organized. Comments are denoted with an opening (/*) and then closed with a (*/). For example, if your were sectioning off a "Layout" portion of your stylesheet you could do the following with comments, /* Layout Section Begin */, to make it easier to identify when one area begins and another ends.

It is also important to know the Cascading Order of style properties in your css. If the same selctor is found multiple times in a stylesheet then the occurance found lowest in the document will override any occurances found above. For example:

.ThisSelector
{
   border: solid 1px Red;
   font-weight: bold
}
.ThisSelector
{
   border: solid 3px Black;
}

The property with the Black border value would override the property of the aforementioned Red border value due to it's location in the stylesheet.

An important item to note would be that an embedded stylesheet will override an external stylesheet and an inline style will override an embedded stylesheet.

©2009 Uncle Bacon. All Rights Reserved