CSS Basics
CSS stands for Cascading Style Sheets and together with HTML it defines the layout, the colors and the fonts of a website. With this tutorial you should get the general idea on how to change your site's look and feel.
We wanted to give the site owners full power to change their site - this is why there is a layout editor to make changes to the HTML and a CSS editor to make changes to the style of your site. It takes a little time to learn how to customize yor site, but there is always help in our forums in case you get stuck.
Rules
CSS consists of a set of rules, for example, a text color, a background color, a specific font or a place for a box on your site.
Rules are applied to targets which can be tag names (a, h1, body, div, p, img, etc...) or user-defined class names and selectors. So generally there are three types where rules can be applied to; tags, classes and (other) selectors—more on this later.
Example
h1, h2, h3, h4, h5, h6 { font: normal 100%/120% Georgia, serif; letter-spacing: 1px; color: #210; margin:10px 0 0 0; }
Here you can see that we have defined the font, letter-spacing, color and margin for headings, which are named from h1 to h6, h1 being the most important heading.
Tag names
If you apply a rule to a tag h1 (heading 1), it will affect all the heading 1's on your site. This way you can easily change all the headings to have a certain style (color, font, letter-spacing) on your site.
Colors
h1 { color: #210 }
Colors are defined by these cryptic number-letter sequences. 0 stands for black and F stands for white, and the three-letter sequence 210 stands for RGB, which is red, green and blue components of the color. #210 is a bit reddish and quite dark color. #210 is actually a shorthand form of #221100, so you can use either 3 letter or 6 letter sequences.
You can also define colors as
color: red;color: blue;
etc.. the common names for colors can be used.
Class names and selectors
Of course if you only could apply rules to tag names, you would run into trouble at some point, if you wanted to have a different kind of headings on some part of your site, that's why you can apply these rules selectively to some h1 tags, for example, and not apply them to some other h1 tags. That's where class and ID selectors come into play.
In the Editsite's default templates, there are a few class names and selectors already defined. For example, the page footer has an ID of footer. In CSS we refer to this box by #footer, like this:
#footer { margin:0 auto; padding: 7px 0; border-top:#BBC4A3 1px solid; clear: both; font-size: 0.8em; color: #999; text-align:center; width:656px;}
This is the way HTML and CSS is associated with each other, by tag names, ID selectors and class names.
Class names
Class names are a bit similar to ID selectors. In Editsite's default templates there are many class names defined already, for example:
.ndFormError { color:red; } 