CSS Syntax.

object {property: value}

The object is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:

body {color: white}

If you are defining a value with two words, you need to enclose these in quotes as show below:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you should separate each property with a semi-colon. The example below shows how to define a right aligned div with a red text color:

div {text-align:right;color:red}

To make the style definitions more readable, I recommend you put one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

You can also objects. Separate each object with a comma. In the example below we have grouped all the header elements. Each header element will be blue:

h1,h2,h3,h4,h5,h6
{
color: blue
}

Now your are saying, "But what if I don't want all of my objects to have the same look??" That's ok, with the class attribute you can define different styles for the same HTML element. Lets say you have two paragraphs that you want to look different. Well, by putting a period after the HTML element, and then a name, you just created two different classes that can be applied to different paragraphs. By naming this way, if you do not define a generic paragraph, you can then leave some paragraphs default and only apply styles at will.

p.right {text-align: right}
p.center {text-align: center}

Now that you have defined your classes in the CSS, below you show you the syntax to apply a class to a tag:

<p class="right">
This paragraph will be right-aligned.
</p><p class="center">
This paragraph will be center-aligned.
</p>

Note: Only one class can be specified per HTML element!

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

<h1 class="center">
This heading will be center-aligned
</h1><p class="center">
This paragraph will also be center-aligned.
</p>

The id attribute can be defined in two ways just as you do the class. It can be defined to match all HTML elements with a particular id, or to match only one HTML element with a particular id.

<p id="intro">
This paragraph will be right-aligned.
</p>

In this example the id attribute will match all HTML elements with id="intro":

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

In this example the id attribute will match only div elements with id="intro":

div#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

As you may or may not know, you can insert a comment into html, javascript, and any other programming language known to man. The following syntax shows you how you can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/", like this:

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

More to come.......