CSS Layout

How about it? Are you confused by it sometimes? Do you wonder what it is that makes this potentially killer design not appear properly?

The culprit, my friends, is often the syntax. I was feeling your pain and decided to just quickly write it down for you. Memorize it, print it, clip it, and stuff it in your pocket… help has arrived.

Without going into too much detail (if you’d like me to, just write and let us know), I’ll let you know about the terms that you need to know, and how to put all of this into order.

In your .css document what you need to list are a series of rules (or statements). These statements will tell your browser how it should be interpreting the instructions. The syntax used to write these rules are made of three things: a selector, a property and a value in this order always - actually, order is something else that needs its own post. A property and a value together are called a declaration. Check out the figure below for a clear visual.

Remember that the declaration must enclosed by curly braces!

Now the best way to describe this is that your selector is the tag that you want your rule to affect, the property is basically the attribute of that tag and the value is really the how of that rule.

Remember to always close the value with a semicolon!

If you have more than one property, you can list them one after the other but they must be separated by a semicolon. If you have numerous values, they must be separated by a comma and a space:

body { font-family: arial, helvetica, sans-serif; background: #FFFFFF; color: black}

To make it easier to read, try to write your rule this way:

body {

font-family: arial, helvetica, sans-serif;

background: #FFFFFF;

color: black

}

If your value has more than one word, make sure to surround it with quotes:

body {

font-family: “century gothic”, helvetica, sans-serif;

background: #FFFFFF;

color: black

}

That’s it for today! Hope this helps.