« | 1 | 2 | 3 | Page 4: Your stylesheet

Continued from previous page

“Buckle Your Seatbelt, Dorothy”

Before you start writing your own stylesheet, do yourself a big favour. Get to know CSS and what you can do with it. Here is a list of resources that are invaluable:

• W3 Schools
• W3C CSS pages
• A List Apart
• Eric Meyer

“And now, something completely different”

When you write the stylesheet you may want to have the Freeway document open, so you can easily check the names of the boxes on your page for example. Now, take a look at the stylesheet provided with this tutorial (the ‘styles.css’ document found in the dbs-doc folder), which you open in your text editor of choice. As I mentioned earlier, I have only included the basic selectors, so you will now fill that stylesheet with styles for the various boxes and the content you are planning on using on the page. Just remember that when doing so, it is best if you do not include values for margins and padding for the container boxes that have the Div-a-Tron action applied to them as this will cause conflicting results. You can (and often should) set margins and/or padding values on text styles and divs that are written into any include files you may be using. The rule of thumb here is: if a container is placed on a Freeway page, I don’t write margins and padding values in the stylesheet. If a container is written into a text file, I do use margins and/or padding values in the stylesheet.

Keep in mind that when you write your styles, you start with the name of the selector, id or class, followed by a curly brace. Then you write the style declarations in name/value pairs, where the name comes first, followed by a colon, then comes the value, followed by a semi-colon which closes the declaration. You then close the selector with a reversed curly brace. Like this:
#mainwrap { border: 1px solid #aeaeae; background: #000; font-size: 12px; line-height: 2; margin: 5px 0; }

That is the kind of things a stylesheet will contain. You save the completed stylesheet, with the filetype .css, in you project folder and that’s it. You’re done. Until you have to revise the stylesheet, naturally.

Next installment of Driven By Standards will discuss how we work with content in a standards based design, within Freeway. Stay tuned!

« | 1 | 2 | 3 | Page 4: Your stylesheet