23 Mar 09 CSS Design for change

While you may well have read many articles on CSS (Cascading Style Sheets) and you may have grasped the basics for including a little bit of style using the raw code, but you are still lacking the techniques needed to fully implement a design that you have scribbled on a beer mat.

So how do you go about getting the scribble into a working CSS design?

One way is to outsource your scribble to a graphic designer, who will transform it into a useable digital image, then all you have to do is rearrange a few divs here and there.

Another way is to give it your best effort using all the free stock images you can find across the net, or even scan your CSS design, preferably to a manageble size for layout purposes.

How do you implement the newly created design into those div tags?

If you have grasped CSS thus far you will know that an external CSS file will manage your whole website, simply by using one single line of code within your CSS file you can implement your new design using;

background: url("pathtoyourimage/whateveryourimageisnamed.gif") no-repeat center;

This single line can be used with different images throughout your page design, all you have to do is shuffle the divs around a bit using the margin attributes.

Before long you will be creating jaw dropping CSS Designs all from a scribble on a beer mat!

About the Author

Dean Cruddace is the Founder and Lead Designer for Website Design Sunderland, creating, maintaining and optimising websites since 2001.