Creating a CSS layout from scratch

8. Some basic text styles

Sweet jesus! Are you sick of looking at those awful background colours or what?!

Get rid of them. Rip them all out except for the red navigation.

That looks a little better, but the text still looks horrible. Lets set a global font family, colour, and size to use as a nice base. The font attributes we set on the body will automatically inherit down to any other text in the site unless specifically overridden with another style. Make a new CSS rule just before the “hidden” class near the top of the stylesheet:

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
}

The stuff above is pretty self explainitory.

If everything is going according to plan, you should be looking at something like this:

What this needs is some padding to separate those blocks of content from each other.

According to the design, the gap below the content headings is roughly 15px, and the gaps below each paragraph are around 15px. So lets grab those 2 css rules we made earlier and apply padding-bottom rules to them:

#content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

We also need 25px of padding around the whole content div, and the whole padding div, giving them some space to breath.

This part SHOULD be easy. In theory you would just set padding: 25px; on the divs, but sadly, due to problems in Internet Explorer, we can’t do this.

The IE problem is described in detail here.

There are 2 possible ways to tackle this problem, one involves writing some funky CSS “Hacks” to hide certain css rules from one browser, while showing it to another, but because padding is something we use a lot, we’re going to do it the other way.

The other way is to insert an additional div inside the divs which we want padded, and set their class to “padding”. Padding is the only thing that will be applied to these padding divs.

The reason this works is that the padding divs don’t have a set width. As a rule, try not to add padding and a static width or height on the same element.

<div id="sidebar-a">
	<div class="padding">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
		Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
		Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
		euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
		Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
		purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
	</div>
</div>

Do the same for the content div.

Now in the stylesheet we will create 2 new rules, shown here in green:

#sidebar-a {
	float: right;
	width: 280px;
}

#sidebar-a .padding {
	padding: 25px;
}

#content {
	margin-right: 280px;
}

#content .padding {
	padding: 25px;
}

Using the same method as we did before, we have selected only the elements with a class=“padding” that are children of the #sidebar-a, or #content divs.

The leading (vertical space between lines of text) on the content text and sidebar text should be larger, according to the graphic draft. In CSS, leading is set with the line-height attribute. Lets add a line height of 18px:

#sidebar-a {
	float: right;
	width: 280px;
	line-height: 18px;
}

#content {
	margin-right: 280px;
	line-height: 18px;
}

Moving on, the heading <h2>‘s that we added look pretty ugly. Because the font they are using isn’t a web font, we are going to have to replace them with images. Create 2 images like the ones below, and put them in the /images/headings/ directory

Replace the heading text with these images, but remember to keep the <h2> tags around the image tags, and remember to put alt attributes on the images. Alt attributes are designed to display as an alternative to the image if a user is viewing the page in a browser that does not support images, or has images turned off. It is also useful for search engine spiders, as they can not understand images.

<h2><img src="images/headings/about.gif" width="54" height="14" alt="About" /></h2>

<h2><img src="images/headings/contact.gif" width="98" height="14" alt="Contact Us" /></h2>

Its starting to take shape. You should be looking at something like this:

« Previous 1 2 3 4 5 6 7 8 9 10 11 12 Next »

70 Comments

Chris says:

Hey Steve - old article or not this is a nice & simple explanation of how ‘float’ works. I’ve always battled to get my head around those ... cheers!
Arizona Web Design says:

Thanks so much for sharing all the information, I wasn’t hoping to find such complete tutorials for free. It may be an old article but the basic principles of website building and web design have remained the same.
Jason says:

I just finished this tutorial, and although it was not current, it was very helpful. I have published my completed example (with a link to this page)at http://bit.ly/d9IEIb for anyone to check out. I will post links to the menu images and css file on my blog. Thank you for providing this resource. Can’t wait to see the update.
Casey says:

An amazing teaching source. Never found anything that present the material, and shows it’s simplicity such as this. I feel like I actually understand css now, whereas most any other place that tries to teach makes it far more complicated than it really is.
Steve Dennis says:

Thanks guys :) I really appreciate the kind words. Keep an eye out for more articles in the near future, and feel free to let me know if there’s anything you would like a good tutorial or article written on, that you’re having trouble finding good information on. Do that via the contact section though :) Cheers!
didik edhi says:

It’s very usefull for me as newbie.good site..all the best.
NeoCaster says:

Thanks for teaching me CSS.
I’m about to move to the next page, b4 that i just felt can’t last bit of code for the css be as under? Rather replacing the h2 code u explained earlier. Lemme now if I’m correct. Cheers !!

#content p, h1, h2 {
margin: 0;
padding: 0;
}
Steve Dennis says:

@NeoCaster: I wanted to make sure people were understanding the basic concepts before bringing up things like grouping, but yes, the code you’ve written would be a more elegant solution.

Some people favour using a “CSS Reset” to zero out browser defaults like margins and padding, but I am heavily against that method, as I believe we should be leveraging default browser behaviour if possible.
NeoCaster says:

Aha !! Sorry about that, I’m here on this page (pg 9) now… i see ‘h1’ should be separate. Cheers !!
Preston Racette says:

Thanks so much for sharing all the information
Mike says:

I have a question…I normally use tables to do my layouts, but now I’m using CSS but one thing I can’t quite figure out is how to use percentages correctly. With tables its quite easy, if you want the height the whole browser you use 100% and it’ll stretch whichever cell has a “*” in it. How would you accomplish this with css? I want to color the “sidebar” of this tutorial, but if you just add a background it only colors where the text is. I want it to span all the way from the bottom of the header image, to the footer. Does anyone have any information that could help me out or possibly a link to another article that covers this?
Steve Dennis says:

@Mike: That’s a question I get asked a lot. It requires a bit of a shift in mindset. Height=“100%” doesn’t work how you would expect, coming from a background in Table layouts. If you were trying to use this to achieve a page design where the footer is always at the bottom of the browser, I would steer you away from designing like that, as it offers no benefit for the user, and only serves to complicate your code.

It doesn’t seem like that’s your intention though. It sounds like you just want equal height columns, and adding a height would seem like the logical way to achieve this. Unfortunately it’s not that easy, but there is an excellent article over at A List Apart that covers exactly how to achieve what you want: http://www.alistapart.com/articles/fauxcolumns/
Mike says:

Thanks a lot for the response Steve, I very much appreciate it!
adam says:

thanks a lot for this great tutorial..
easy to understanding ;)
Harjit says:

hey steve, this site tutorial is amazing, it actually proved to be very handy in understanding css and other functions of html. Though I’m getting stuck in one area, say if i create a button on the menus, how do i gett he onmouseover attribute to work? I have tried almost everything and for some reason I can’t get it to work? Can you help me…cheers.
nayon says:

very helpful post..
Clear instruction , After completing your tutorial i get clear idea about css.
thanks..
Erik says:

Thank you for this. I’ve been hitting a wall, trying to grasp layout concepts and your tutorial was invaluable. I’m really looking forward to the updated version. Thanks again, Steve.
Oliver says:

Hiii Steve!
Great job! I know now why my “DIVs” didn’t work. You explain every parameter let us see the result and told us how to correct the bad things.
This way of doing things is more interesting than gave us a lot of code to copy/Paste wihtout a comprehension.

Thanks a lot, I’m waiting for the new one.
Nick says:

Thanks for this tutorial. I learned a lot, and it helped to clear up a lot of confusion about float based layouts. The only criticism I can give is that things got way too complicated at page 11. Everything up to that point was great, but the hacks and the advanced CSS just to do a menu, that stuff went over my head and I thought was not a good progression to the flow of the first 10 pages of your tutorial! Other than that, I found it very useful and look forward to visiting your site again.
Steve Dennis says:

Thanks everyone :) It’s great to still see this tutorial being helpful even 4 years after writing it.

@nick: I agree, it drops you in the deep end, however at the time of writing, LOTS of people were still using javascript based rollovers, and the methods described in the tutorial are far better to learn in the long run. Text based navs are sometimes simpler in terms of CSS, but at the end of the day, too many people were asking me how to do image based navs at the time, so I obliged :)
Martin says:

quite good basic tutorial

www.idcreate.net
php tutorial says:

Nice article. Even if it is old, but it contains useful information.
Andy says:

Great tutorial mate, have been looking for something like this for so long; a guide which actually breaks down each component and shows the effect of each parameter change.

Thanks a lot
Bashar says:

Really looking forward to the updated version. It’s the best CSS layout tutorial I found honestly
Hassan Naqvi says:

This article had been my doorway into the css world. Before this article I was designing websites the old-fashioned way using tables. This article is written in such a way that I still refer to it for inspiration and making my css simple.

Looking forward to the new one. Hope this one will still be available.
Medyum Hoca says:

Really looking forward to the updated version. It’s the best CSS layout tutorial I found honestly
Mike Shved says:

Thanks, dude!
From Ukraine with llove :)
icon creation says:

Many applications pack all their data files into a single file, using internal markers to discern the different types of information contained within. The data files used by games such as Doom and Quake
Arch-Area says:

Without this article, my game would never exist :) Cheers!
Airstream says:

This is amazing. Great teaching source
JayAche says:

Can’t get the navigation-menu to work.

I’m using .png and different sized pictures.
Does this make any difference?
Reviewpsdtohtml says:

HI

Good one. Liked and so added to our blog.
Steve Dennis says:

Thanks for the link :)
sunny says:

Thanx!! a lot Steve for such an easy and understandable tutorial. Specially the float & clear part is very clear and easy to understand.

Looking forward to see more such articles.

Thanx!! Buddy
witek says:

You should add semantic meaning to data in footer, using html5 rel attributes or new tags, or using microformats for this (http://microformats.org/wiki/adr , there is also other example and good simple microformats).
Steve Dennis says:

Woah man, did you just jump straight to page 7? Check the note on page 1 :) 4yr+ old tutorial bud! hehe

I should add those to this site though *blush*...
sunny says:

Hi!! Steve,

I have a problem, when I am publishing my file in Mozilla Firefox, margin: 0px, padding: 0px; for html, body selector is not supporting & it shows the default 8px margin from top. Main nav is also having some problem.

Please help….

Thanx!!

Sunny
web designer india says:

wow good tutorial its very use full
Dusty Rose Graphix says:

This is pretty good!!!! I offer layouts, pro pics, scroll boxes and more and people always ask me how do you make layouts. I could never explain so now I can just send them your link!!!
stendmaster says:

Если бы я все это знал до того, как слизал сайт по шаблону.
afsar khan says:

hi
Good very good tut boss i was looking for the kind of tutorial for finishing the job of my own website www.merehumraaz.com. Keep it on and thank a lot.
nzyme says:

now this is something interesting.its an excellent tutorial !!! keep up the good work. I did mess up at some places, but it was really helpful :)
kumar says:

hi!

i tried your navigation css. But i don’t know how to write div tags in the body section. you only gave the css section. It would have been better if you gave body section code also.
Steve Dennis says:

Hi Kumar, follow the tutorial from the start. All the info you need is in there.
kumar says:

hi steve!

Thanks for responding! i am sorry, i have not seen from the beginning. Really it is nice and helpful. If you don’t mind, give me your mail id. So i will email you if i will need anything about css. Once again thank you!
Chris says:

Awesome tutorial. It’s the first one I actually understood in depth. I noticed that no position attributes were used. I always am getting confused by absolute vs. relative. Why would you use those if you can lay a page out like this? What are the benefits and differences between them? If anyone could answer this I would greatly appreciate it. Maybe even pointing me to another tutorial that is as clear as this one would be extremely helpful.
poolboy says:

This is the best CSS tutorial for beginners I’ve come across. The language is clear and pacing is perfect.
Finally, someone who explains it in plain english rather than unnecessarily complicated code-talk. Thanks, Steve!
ENGLISH34Valerie says:

Houses are quite expensive and not every person is able to buy it. Nevertheless, <a href=“http://bestfinance-blog.com/topics/mortgage-loans”>mortgage loans</a> was invented to help people in such kind of cases.
Pranav says:

Hi Steve! Thanks for this awesome tutorial! I have been running websites (plain html/blogs/forums etc) since 2006 and have tried my luck at many CSS tutorials till now. This was the first time I was able to read and understand it fully… Thanks a lot!!
bee says:

Great tutorial until I got up to page 11! For the life of me I can not get the navigation to work. Ive been throught it a million times but the navigation is not showing up. The click throughs work so I know its there but I cant see anything! Can anyone help?! It would be a shame to give up now when Im so close.
Mark says:

Bee, It sounds like class=“hidden” might still be in use within your html source code. This might explain why you can’t currently see the navigation but the clicks do work.
Steve Dennis says:

Class=“hidden” sets the element to display: none; which would make it non-clickable. If you’re not seeing the nav items, it’s 99% likely a problem with your image. Check your image paths are correct and that the images are all in the right place.
Steve Dennis says:

Shit. I’m surprised anyone’s been able to complete this tutorial at all since I launched the new design. Page 11 is completely screwed in terms of images. Sorry guys I should have checked it in better detail (its hard porting this much content to an entirely new CMS by hand). Fixing now.
Steve Dennis says:

Should be all fixed now guys. Also the example on page 12 now works again. My apologies :)
Bee says:

Thanks Steve! I just overwrote some of my code with yours. Just a couple of things I noticed which is giving me a bit of headache.

Firstly the padding on the side bar doesnt seem to be working anymore?

#sidebar-a .padding {
padding: 25px;

}

I still cant get these clicked images to work. Please see below to see how I am doing it. I have done the ‘services’ class to show you what I did. (Just so you know, all my images are in one folder local to the css)

body.about #header {
height: 150px;
background: #db6d16
url(images/about.jpg);
}
body.services #header {
height: 150px;
background: #db6d16
url(images/services.jpg);
}

Hope you can help! Thanks again.
Praca says:

Great tutorial I was looking for sth like this long time, thanks a lot.
Swift says:

Great tutorial!

Though I would like to point out that the reason so many folks are having trouble with the roll over images is possibly due to the fact that you initially save the files as .GIF’s and link to them…only to link to them as .JPG’s on the last step of page 11.

;)
Steve Dennis says:

I see what you’re saying Swift, but if you have a closer look you’ll see that the last code block on page 11 is referring to the header images (which are jpg’s in a different sub-directory). I think the paragraph of text above it makes this fairly clear if someone is following the tutorial and reading it as they go.

4+ years on, with cross-browser positioning being a lot better than it was, there are much better ways of achieving a similar header effect now with a lot less images.
Swift says:

Doh!

yep…yep…I see what you’re saying. I should have noticed that!

That’s what happens when I let work distract me from playing with stuff ;)

Great job once again! Nice of you to put this up!
uggs sale says:

Bee, It sounds like class=“hidden” might still be in use within your html source code. This might explain why you can’t currently see the navigation but the clicks do work.
Jason W says:

This is by far the best CSS tutorial I have gone through. Thanks so much for this, I know this is an old article but it’s relevant and very useful even today.
iFranzi says:

nice tut.
ud says:

nice very nice tut
hm says:

great tutorial! helped me a lot!!
Derek says:

a great one for a beginner like me who wants to jump into CSS. I like how you color coded everything at first to establish the basic layout. Brilliant.
Nirupam Burman says:

Hi Steve,
Awesome work by you,2 thums up.I always had/has/have problems using css with div..alignment and making sections etc..now i am bit confident..just if you could let us know a lot of generic hacking techniques to overcome browser problems it would be so useful because it adds up value to others experience.
Just like the way you have explained this tutorial it would be just great.
Eagerly,waiting for your reply.
Nirupam Burman says:

Its awesome tutorial..2 THUMS UP.i think i am more confident now with div/css..alignment and positioning was the problem i was facing..anyways,it would be really helpful if you could teach css hacks and some of the generic hacks and best practises.
And also css alignment of div ..to design any type of site..
Marv says:

hi steve just wondering why does the navigation images doesn’t show up? but the header image is ok..what could be the problem?, is it the root folder?
LearnWebsiteDesign.com says:

This is one of the tutorials that first helped me to understand how to create css layouts.

Thanks
Jose
Venky says:

Thanks

Articles & Tutorials

Creating a CSS layout from scratch

8. Some basic text styles

70 Comments