CSS -How I Did It:Part 1

Posted on Sep 26th 2009 | 1comments

Wikipedia defines CSS as a style sheet language used to describe the presentation semantics of a document written in a markup language. Simply speaking, CSS is the flesh of your website. The entire look and feel of your website depends on CSS. You can always enhance your websites using JavaScript frameworks like jQuery and Mootools, but they would be completely useless if you have a poor CSS.

I went through a number of blogs and books to understand various CSS techniques used by web designers. Smashing Magazine and A List Apart have got the best articles on CSS techniques. Some of the techniques described on these websites helped me a lot in styling my blog.. This is the first part in a three part series on describing the CSS techniques which I have used for my blog. In this post, I will show you how I defined the basic blog structure in CSS. So, here we go!

We need a layout before we can get into CSS. I designed my website layout in Photoshop.

Once the layout was ready, I started working on my CSS. I decided to have three different CSS files for my blog.

Blog structure was defined in layout.css.

Typography was defined in typography.css.

Advanced styling was defined in styling.css.

Layout.css

I decided to use a simple CSS reset to eliminate various browser inconsistencies. Know more about CSS reset here

 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}

My blog has a two column layout with a header, navigation bar, end bar and footer. I defined this structure in layout.css.

body {
	background:#f6f6f6 url(../img/bgtile.jpg) repeat-y 50% 0;
	text-align: center;
	margin:0;
}

#container {
	width:1028px;
	height:100%;
	margin:0 auto;
}

#header {
	background: url(../img/WAG.jpg) no-repeat;
	width:1028px;
	height:300px;
	margin:0px;
	padding:0px;
	clear:both;
}

#navigationBar {
	background: url(../img/navbar.jpg) no-repeat;
	float:left;
	width:1028px;
	height:50px;
	margin:0px;
	clear:both;
}

#sidebar {
	top:auto;
	float:right;
	width:300px;
	height:auto;
}

#content {
	float:left;
	width:700px;
	height:auto;
}

#endbar {
	background: url(../img/endbar.jpg) no-repeat;
	float:left;
	width:1028px;
	height:50px;
	margin:0px;
	clear:both;
	
}

#footer {
	background: url(../img/WAG_Footer2.jpg) no-repeat;
	float:left;
	clear:both;
	width:1028px;
	height:300px;
}

Now, one of the problems I faced in this blog design was extending the right column (sidebar) all the way down to the footer. The left column (blog content) would always vary in height (hence, height-auto) depending upon the length of the article. However, the right column always ended up in between the page, which was looking quite awkward. This is where A List Apart came for rescue. I used the faux column technique which has been described hereNotice the 2 line in layout.css, which is used to apply the faux column technique.

background:#f6f6f6 url(../img/bgtile.jpg) repeat-y 50% 0;

Also, take a look at the container div. I have used margin 0 auto so as to position my blog in center of the screen.

This is how I defined the basic blog structure in layout.css. In upcoming posts, we will take a look at the remaining two stylesheets.

Share