Creating a CSS Design from Scratch

print icon
  1. Introduction
  2. Analyze, identify and structure
  3. Creating the global layout
  4. Designing the header
  5. Designing the sidebars
  6. Designing the center part
  7. Conclusion

Introduction

Small preview of final Design
For years, the easiest way to convert a design, that you or a fellow designer carefully composed in Photoshop, was to cut it in several rectangular parts, wrap a table around, spanning columns and rows as you pleased and you're done. Nowadays, this has become a "little" more complicated, as web standardists enter the scene and tell you what you should do. Don't understand me wrong, this is a good thing and I'm a full supporter of most of the standards and ideas that are promoted from organizations like the W3C. Unfortunately, it takes a lot of practice, trial and error and experience to do things the correct way; if there is a correct way.

I want to show you , using as reference a website that I recently visited and had the pleasure to look at the html code, how it is possible to draw a clean line between content & design, just the way it is intended. The objective is to convert the old design, using non-standard HTML, evil hacks and overly complicated CSS into a fully cross-browser compatible, structured design that is easily extendable and modifiable. The end result can be seen here.

Analyze, identify and structure

The first step in the design process is to look at the design and identify the main components. Imagine a castle made of different logo blocks: your task is to analyze the castle, identify the different parts and use the correct logo blocks to be able to build that castle. This is probably the hardest part of the entire process and requires careful planing. You have to break the design into separate pieces, as if you'd cut the image with a knife into small regions, each region representing a new element in the design.
Fortunately, it is very easy to identify the structure of this design: one horizontal header, and a three column layout for the body. Several other things you could notice is that the website width is 100%, the two sidebars are of fixed with and each represent element within the sidebars is independent from each other and could be loaded dynamically as modules.
I wouldn't worry at this stage about how to design the elements, our current goal is to identify and structure. Another important concept is to identify parts that share common properties. Even though the sidebars have 6 different boxes, you probably noticed that they have several things in common (like the way the background is designed, the position of the title, the icon left of the title, the width and the position of the content). Generally, if you are able to regroup several objects, you can design them using the class attribute, otherwise, if they are unique, it is best to assign them a unique identifier id and reference them directly in CSS.
The class attribute, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances.

Creating the global layout

Let's start our design process by creating the basic layout for our website. We do this by adding elements to our HTML code and position them according to our desired result with CSS. A rule of thumb is that everything related to the visual aspect of our website is left to CSS and HTML represents only the content. If we want to add an element to our website, we add a new DIV container, which is nothing else than a generic language/style container and imposes no other presentational idiom on the content. A div container is nothing else than a box, that can be modified using a CSS stylesheet, the div is accessed by the mean of his class and/or id. This being said, the structure of our HTML document will look like this, if we only add the header and the three columns. 
<body>
    <div id="header">header</div>
    <div id="wrapper">
        <div id="container">
            <div id="center">center</div>
            <div id="leftSidebar">left</div>
            <div id="rightSidebar">right</div>
        </div>
    </div>
</body>
You probably notice that I put a div contained called "wrapper" around three of the containers. I did this for several reasons: first of all, they can be considered as one global element, compared to the header file, which is the content of our website. If we cut the image in parts with our knife, the first horizontal cut under the header would create two parts, the header and the page body. The wrapper container represents just that. The need for yet another container becomes clear in a second, when I discuss the problems with a multi-column design.
Another reason is that the wrapper allows us to apply a CSS stylesheet to all three of the elements at the same time, which is very important for what we want to achieve now: a three-column liquid layout. This is probably the most argumented and discussed subject in the world of web design and there is no generally accepted way of doing this. I copied my implementation from A List Apart, which is a great resource for everything website-related. Author Alan Pearce explains in great detail how he arrived to his CSS design and how to use it in an own design; which is exactly what we're going to do now: 
body {
background-color:#2f2f2f;
margin:0;
padding:0
}

#header {
height:141px;
background-color: red;
}

#wrapper {
font-family:Tahoma, arial, verdana, courier;
padding:0 200px
}

#container {
float:left;
width:100%;
border-left:200px solid #2f2f2f;
border-right:200px solid #2f2f2f;
margin-left:-200px;
margin-right:-200px;
display:inline
}

#leftSidebar {
background-color: blue;
float:left;
width:200px;
margin-left:-200px;
position:relative
}

#center {
background-color: yellow;
float:left;
width:100%;
margin-right:-100%
}

#rightSidebar {
background-color: white;
float:right;
width:200px;
margin-right:-200px;
position:relative
}
A few things you should note is that I added a margin and padding value for the body element, which essentially takes away the default margin between the browser borders and the content and which makes it possible to have our design fill up the entire width of the screen as well as go up till the very top of the window. I also added distinctive colors to each of the elements, to identify potential problems and check if everything shows up correctly. If you did everything as described, you should end up with something like this, which is a very good start to continue the rest of the design from.

Designing the header

Since we have already our header container, the only thing left to do is to enter the header content (the logo title and slogan) and to design the header visually. Since the logo title and the slogan are unique within the website, I decide to give them a unique id. The line beneath the logo title could be done with an image, but to stay true to the nature of CSS, I decide to draw the line using the bottom-border of the logo title.
The HTML code once again only contains the content and the entire look is done within the CSS code: 
<div id="header">
    <div id="logo">
        <div id="logo_title">
            Queatrix's.com
        </div>
        <div id="logo_slogan">
            program blog and archive.
        </div>
    </div>
</div>
Let's start with the header background. If you give it a close look, you'll notice that the background is made up of repeatable, regular, diagonal stripes. Everything which is repeatable and regular is good, since it makes it possible to cut a very specific part out of the image and repeat it horizontally over the whole width, which saves not only space as the image is smaller, but the site will load faster (less image data to transfer) and the design is resolution independent. To cut the needed part out from the image, I usually start in the lower left corner and select as many pixels to the right until the texture starts to repeat itself (five pixels in this case). Notice that the background has a vertical gradient and a much darker part at the bottom, which makes it impossible to repeat vertically, otherwise we could have cut a small rectangle of only 5x5 pixels and repeated in every direction to fill the entire div container. If you perform the cut correctly, you should end up with an 5x141 pixel image.
The CSS code for the text is pretty standard, the only thing to note is the use of the bottom-border to simulate the horizontal line underneath the title logo: 

#header {
height:141px;
background:url(../images/header_bg.png) repeat-x 0 0
}

#logo {
color:#fff;
padding:30px 0 0 50px
}

#logo_title {
font-family:georgia, tahoma, arial narrow, arial;
font-size:26px;
font-weight:400;
text-transform:uppercase;
letter-spacing:2px;
border-bottom:1px solid #7ea3ac;
width:160px
}

#logo_slogan {
font-size:10px;
font-family:tahoma, arial
}
If you followed the instructions carefully, you should now have the following result.

Designing the sidebars

Now that we're done with the header, we'll focus on the sidebars. The left and right sidebar can be treated equally, as their content is independent of their position within the side. Each sidebar is made up of different modules and as you might guess, each module is a div container. The modules share common properties, which is best represented using a class, since one CSS definition of the class will automatically be applied to every member of that class. However, each module also has its very own properties, like the background color. To do this, not only do I define a class for the sidebar modules, but I also give each sidebar its very own id, that can be used to modify its look without changing the other modules.
To save some space, I only post the HTML code from the left sidebar, the right sidebar modules are done in exactly the same way: 
<div id="leftSidebar">
    <div id="categories" class="sidebar_item">
        <div class="sidebar_title">
            Categories
        </div>
        <ul>
            <li>
                <a href="http://cboard.cprogramming.com/" target="_blank">link test</a>
            </li>
            <li>Games
            </li>
        </ul>
    </div>
    <div id="resources" class="sidebar_item">
        <div class="sidebar_title">
            Other Resources
        </div>
        <ul>
            <li>Tools
            </li>
            <li>Games
            </li>
        </ul>
    </div>
    <div id="foo" class="sidebar_item">
        <div class="sidebar_title">
            Foo
        </div>
        <ul>
            <li>Tools
            </li>
            <li>Games
            </li>
        </ul>
    </div>
</div>
Once again, there is no markup that would change the visual aspect of modules. Please note that each module has an id and a class. The class defines the shared attributes like width, minimal height, font attributes and positions while the id specifies the particular aspects like background. Since two modules can share the same background color, it would have been possible to define a class "orange_background" and add that class to each module that has an orange background.
The CSS code for the class sidebar_item can be found here: 
.sidebar_item {
float:left;
width:100%;
min-height: 160px;
margin:1px 0 0;
padding:0
}
Explanation of how the sidebar module is designed
Now, let's start designing the modules themselves. Since the background has no defined elements apart from the vertical gradient, it is possible to only use an image of one pixel width and repeat that image horizontally. Since the module is of unknown height, we have to limit the gradient to a certain height, or else we'd stretch the image which would result in a horrible quality. Fortunately, the gradient results in a constant color value at a certain height, so all we have to do is cut out a region whose height is big enough to hold the gradient, and then we simply fill the background of the container with the same color than the color value at the bottom of the image.
This might sound a little complicated but in fact, it's only one simple CSS line: 
#categories {
background:#e67701 url(../images/orange_gradient_bg.png) repeat-x 0 0
}
That one line defines that the color fill value is #e67701, that a background image is uses (of size 1x160), that it should be repeated horizontally and that it's fixed at the top left corner.
Since it is possible in CSS to regroup several id definitions, the complete code for the six different modules looks like this: 
#categories,#search {
background:#e67701 url(../images/orange_gradient_bg.png) repeat-x 0 0
}

#resources,#meta {
background:#2b6475 url(../images/blue_gradient_bg.png) repeat-x 0 0
}

#archives,#foo {
background:#6d8a0c url(../images/green_gradient_bg.png) repeat-x 0 0
}
The next step is to place the module title together with the image. I recommend you that, whenever an image is used that gives no additional meaning to the content and is only for decorative purpose, to set is as a background image. Simply set the image as background with CSS, position it to the left (in this case), don't repeat it and then add a padding-left to your container the width of your image: 
.sidebar_title {
background:url(../images/sidebar_title_logo.gif) no-repeat 0 0;
height:30px;
font-size:13px;
color:#493800;
font-weight:700;
letter-spacing:normal;
margin:20px 0 0 35px;
padding:4px 0 0 40px
}
Finally, all that is left to do is to design the list inside the module. First, we remove the usual list style (since we plan on using our own) and do the same trick as with the module title. The little white arrow is set as li background, positioned to the left and the text is padded to the right accordingly. The line underneath the list text is once again only a CSS border-bottom, with the desired style: 
li {
list-style:none;
background:url(../images/list_item.gif) no-repeat 0 5px;
border-bottom:1px dotted #b2c56f;
color:#fff;
font-size:11px;
width:100px;
padding:0 0 5px 7px
}
The search module has to be treated separately, since it has its own icon and the form needs to line up nicely. I added search_title to the class list of the module title container and simply redefined the background image. Finally, I modified the padding inside the search form, gave the text input a nicer look and positioned it relative to the image: 
<div id="search" class="sidebar_item">
    <div class="sidebar_title search_title">
        Search
    </div>
    <form method="get" id="searchform" action="search.php" name="searchform">
        <input type="text" name="searchinput" id="searchinput" value="">
        <input type="image" src="./images/go.gif" value="submit">
    </form>
</div>

.search_title {
background:url(../images/search_bg.gif) no-repeat 0 0
}

#searchform {
padding:20px 0 0 10px
}

#searchinput {
font-size:12px;
color:#483221;
font-family:Tahoma, arial, verdana, courier;
width:109px;
height:21px;
border:#483221 solid 1px;
vertical-align:top;
margin:0 5px
}

Designing the center part

Apart from the current website, I didn't have much information about the design concept of the center section, which is why I kept this part pretty simple. First, I added a class which I called center_item, which basically is a container for one item in the center part, be it news or whatever is shown there. To make the center part align nicely with the two sidebars, I added a margin at the top of the same size than the darker region in the background image of the side modules. Finally, I padded the content, modified the font face, size and color and set the alignment to justify: 
.center_item {
border-top:8px solid #2f2f2f;
text-align:justify;
color:#fff;
font-family:tahoma, arial narrow, arial;
font-size:12px;
padding:10px 40px
}

Conclusion

I hope I was able to show you how convenient it is to strictly separate the content from the actual design. By carefully structuring and naming the content according to its function within the page, the true power from CSS can be applied. This makes it possible in the future to change the design without changing the HTML code.
Apart from the fluid three-column CSS design, there were no major problems that had to be overcome, since the design was pretty simple. If you have any questions, feel free to drop me a note using the Contact Form.