Articles & Tutorials

The articles and tutorials here are provided free of charge, and are fueled by caffeine.

Creating a CSS layout from scratch

This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. I will try my best to explain the concepts behind each step, but a lot of the time other people have already covered these things better than I can. Because of this there will sometimes be links to more information on external sites.

Please use a modern browser such as Opera, Firefox, Google Chrome or Safari for this exercise. Don’t worry though, your site should work in IE at the end of it.

Note: This tutorial is out of date.  I am in the process of writing a new one to reflect the best practices of the present day.

Contents

  1. Introduction
  2. The Design
  3. Default HTML Template
  4. Setting the canvas
  5. The major elements
  6. Floats
  7. Additional Structure
  8. Some basic text styles
  9. The Header
  10. Footer
  11. The Navigation (arg!)
  12. Getting it right in IE

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

102 Comments

  1. Picture of Chris
    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!

  2. Picture of Arizona Web Design

    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.

  3. Picture of Jason
    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.

  4. Picture of Casey
    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.

  5. Picture of Steve Dennis
    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!

  6. Picture of didik edhi

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

  7. Picture of NeoCaster
    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;
    }

  8. Picture of Steve Dennis
    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.

  9. Picture of NeoCaster
    NeoCaster says:

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

  10. Picture of Preston Racette

    Thanks so much for sharing all the information

  11. Picture of Mike
    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?

  12. Picture of Steve Dennis
    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/

  13. Picture of Mike
    Mike says:

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

  14. Picture of adam
    adam says:

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

  15. Picture of Harjit
    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.

  16. Picture of nayon
    nayon says:

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

  17. Picture of Erik
    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.

  18. Picture of Oliver
    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.

  19. Picture of Nick
    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.

  20. Picture of Steve Dennis
    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 :)

  21. Picture of Martin
    Martin says:

    quite good basic tutorial

    www.idcreate.net

  22. Picture of php tutorial

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

  23. Picture of Andy
    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

  24. Picture of Bashar
    Bashar says:

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

  25. Picture of Hassan Naqvi

    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.

  26. Picture of Medyum Hoca

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

  27. Picture of Mike Shved
    Mike Shved says:

    Thanks, dude!
    From Ukraine with llove :)

  28. Picture of icon creation

    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

  29. Picture of Arch-Area
    Arch-Area says:

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

  30. Picture of Airstream
    Airstream says:

    This is amazing. Great teaching source

  31. Picture of JayAche
    JayAche says:

    Can’t get the navigation-menu to work.

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

  32. Picture of Reviewpsdtohtml

    HI

    Good one. Liked and so added to our blog.

  33. Picture of Steve Dennis
    Steve Dennis says:

    Thanks for the link :)

  34. Picture of sunny
    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

  35. Picture of witek
    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).

  36. Picture of Steve Dennis
    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*...

  37. Picture of sunny
    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

  38. Picture of web designer india

    wow good tutorial its very use full

  39. Picture of Dusty Rose Graphix
    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!!!

  40. Picture of stendmaster

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

  41. Picture of afsar khan
    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.

  42. Picture of nzyme
    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 :)

  43. Picture of kumar
    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.

  44. Picture of Steve Dennis
    Steve Dennis says:

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

  45. Picture of kumar
    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!

  46. Picture of Chris
    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.

  47. Picture of poolboy
    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!

  48. Picture of ENGLISH34Valerie

    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.

  49. Picture of Pranav
    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!!

  50. Picture of bee
    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.

  51. Picture of Mark
    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.

  52. Picture of Steve Dennis
    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.

  53. Picture of Steve Dennis
    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.

  54. Picture of Steve Dennis
    Steve Dennis says:

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

  55. Picture of Bee
    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.

  56. Picture of Praca
    Praca says:

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

  57. Picture of Swift
    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.

    ;)

  58. Picture of Steve Dennis
    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.

  59. Picture of Swift
    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!

  60. Picture of uggs sale
    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.

  61. Picture of Jason W
    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.

  62. Picture of iFranzi
    iFranzi says:

    nice tut.

  63. Picture of ud
    ud says:

    nice very nice tut

  64. Picture of hm
    hm says:

    great tutorial! helped me a lot!!

  65. Picture of Derek
    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.

  66. Picture of Nirupam Burman

    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.

  67. Picture of Nirupam Burman

    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..

  68. Picture of Marv
    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?

  69. Picture of LearnWebsiteDesign.com

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

    Thanks
    Jose

  70. Picture of Venky
    Venky says:

    Thanks

  71. Picture of Mac-xtian
    Mac-xtian says:

    Hey Steve you have save me from the fever i had from two sleepless night battling with CSS, both on online and with text book. All i had was just bits of bits and half baked explanation. Your practical explanation is a treatment to my CSS fever. thanks so much for the work made here so far with step by step approach and explicit explanation. I am in deed a debtor to you. Keep an update of this work you are in fact my CSS Guru, Tutor and Mentor.

  72. Picture of Darlton
    Darlton says:

    i am an African student residing in african.Because of poverty level here in western Africa, it is very difficult for us to learn anything like web designing and development. I was fortunate to have access for 800hrs as it was a promotion time given to me by an internet service provider.I had the desire to learn web designing and was looking for a place where i can learn css layout.It was like i found Gold. This site is so rich in information that i was able to start designing a site for my church.pls can you help me by using list{li} to design the same type of nav menu you used in you tutorials on css layout.I think i have a good grasp of list ..Thank you once again.

  73. Picture of Duco
    Duco says:

    I haven’t followed this tutorial yet, but at the look of it it’s very clear. I’m a webdeveloper from The Netherlands and I’m not yet very familiar with the whole CSS story.
    Thanks!!

  74. Picture of Vinc
    Vinc says:

    You should add some code for the “clicked” state of an image ;-)
    #main-nav dt a:active { background-position: 0 -100px; }

  75. Picture of Rinat
    Rinat says:

    This tutorial is *so* freaking clear to me! The last part with those rollovers was a bit confusing (just need to get some rest) so I gave it up for a while, tho. Thank you so much!

  76. Picture of dann_s
    dann_s says:

    Hey Steve
    Excellent tutorial well done—!.  I recently started learning CSS and I have looked many other tutorials I never could understand.(positions attributes) but this way seems much better to do it, however, I have not tried yet just read the tutorial.  Brilliant job

  77. Picture of Raghav
    Raghav says:

    Very meaningful tutorial, thank you for sharing…

  78. Picture of tanzeem
    tanzeem says:

    Excellent tutorial well done

  79. Picture of hyp3r
    hyp3r says:

    when will the new one be finished?

  80. Picture of tori
    tori says:

    Hi very helpful—really is the best one out there by far. Will you be posting the updated version soon? Or maybe just a simple explanation of how we can update it?

  81. Picture of vijay
    vijay says:

    Steve can you make a downloadable copy of this useful tutorial for refering in .pdf format?
    It would be very helpful.
    Thanks for such a wonderful tutorial.

  82. Picture of Paul
    Paul says:

    Steve,

    Very nice tutorial, learned a lot from it.
    When will we see an updated version?

    Thanks

  83. Picture of Someguy
    Someguy says:

    Brilliant tutorial. So far easy to follow.

  84. Picture of mikemil@hotmail.com
    mikemil@hotmail.com says:

    Excellent tutorial - just what I’ve been hoping for.

  85. Picture of Alex
    Alex says:

    thank you very much for the tutorial steve all went well til i got to the nav can you please elaborate on the step below or update the nav code with current css?

    “Now the problem we have, is that we also want the header image to change based on what section we are viewing. So we need to modify the #header rule like so:

    body.about #header {
      height: 150px;
      background: #db6d16
            url(../images/headers/about.jpg);
    }
    Now when you create pages for your other sections, you’d just change the class on the body from about, to say, contact, set up a css rule pointing to the correct header image, and you’re done.”

    thanks again

  86. Picture of kiwi92
    kiwi92 says:

    Hello,

    I’m a beginner, and it is very good tut. Thanks a lot!!
    Very clear, and it is very easy to understand flow on html page.

    Thanks a lot!!

  87. Picture of kigiin
    kigiin says:

    It’s been 4+ years ... any plans to get something new and up to date posted? What you’ve done was fantastic and I’m waiting on an update to see what other great things you can teach us.

  88. Picture of codyy
    codyy says:

    Hey Steve.

    Just a quick question, if im not seeing any changes in my webpage, does this mean I wont until im finished, btw i’m using iE.

  89. Picture of umy
    umy says:

    thankyou, this tutorial helping me develop a web page ;)

  90. Picture of vis
    vis says:

    thanks great tutorials.

  91. Picture of Moritz
    Moritz says:

    Awesome tutorial, am a complete newbie to all things HTML and CSS and even I can understand most of what’s going on. Am currently on p.11 and will definitely use this for the site I’m building.

    Thanks!
    Moritz

  92. Picture of Abraham
    Abraham says:

    I want to thank you for helping me understand CSS (with this tutorial) when I first started out about a year and a half ago. This article finally made CSS make sense to me. I had bought the books (a ton of them) and none helped to make sense of it all till I found your tutorial! Thanks again for giving us of your time and know-how. Thank You from Texas USA!

  93. Picture of Paul
    Paul says:

    Thank you for sharing. It is a good tutorial.

  94. Picture of Real Estate SEO Nut

    Everyone is absolutely right, this is old but when you have a snag these sections layout the process really well.  I’ve bookmarked this as a CSS reference when I want a quick run through to reference.  Kudos to the writer too!

  95. Picture of Daniel Moses
    Daniel Moses says:

    Awesome! Great work. It has really helped me like it has helped many others. I am looking forward for the updated tutorial.

  96. Picture of Tucson Web Design

    Nice tutorial. Just subscribed to the RSS feed - hope to see more like this!

  97. Picture of Tiago
    Tiago says:

    The best tutorial so far was your website! Was it coded using a tool or (as it seems) written by hand?

    Congratulations,

    I not even needed to go through the tutorial, your site is a blast!

  98. Picture of Justin
    Justin says:

    Great tutorial, very detailed and easy to follow. Thanks for sharing!

  99. Picture of niki
    niki says:

    Thanks a lot. Such a great and well explained tutorial.

  100. Picture of niki
    niki says:

    thanks again, I just have a problem when I modify the header with the body.about class the main picture -with the feet- dissapears. do you have any idea what i’m doing wrong?

  101. Picture of Jimmy
    Jimmy says:

    Fantastic tutorial, best I’ve found so far. Can’t wait to see the updated version. Just getting into HTML and CSS and didn’t realise just how hard it was going to be. Your tutorial is really clear and easy to follow. Excellent!

  102. Picture of Peter
    Peter says:

    Excellent tutorial, I am very very thanks….

Commenting is not available in this weblog entry.