 i thought i would give a quick tutorial with examples of the 6 most important css techniques that i think you need to know get a consistent base font size get consistent margins set a float to clear a float image replacement faux columns css sprites 1 get a consistent base font size body font size 62 5% until ie finally supports the resizing of text in pixels this is the best technique to gain full control over your font sizes by setting the body font size to 62 5% that will set your font size to 10 pixels that way 1em is equal to 10 pixels although i typically then set my container font size to 1 2em which in turn sets the font size to 12 pixels but still then you know that 1em is equal to 12 pixels see the example 2 get consistent margins there are some great css resets out there but i usually dont need one that goes so far i like to just remove the margin and padding from every element html body div h1 h2 h3 h4 h5 h6 ul ol dl li dt dd p blockquote pre form fieldset table th td margin 0 padding 0 then you can set the margins that you want accordingly see the example 3 set a float to clear a float floating is probably one of the most important things to understand with css but knowing how to clear floats is necessary too all you need to remember is set a float to clear a float i have created a simple page with two floating columns next to each other you will notice in the example that the grey background does not contain the floating columns so the easiest thing to do is to set the containing element to float but now you will see that the container background doesnt contain the content area since the container has margin 0 auto we do not want to float it because it will move it to whichever side we float it so another way to clear the float is to insert a clearing element in this case i just use an empty div set to clear both now there are other ways to clear a float without markup but i have noticed some inconsistencies with that technique so i just sacrifice an empty div 4 image replacement sure there are a lot of different image replacement techniques but i think that you get to most benefits from this technique i also discussed this technique in a previous article improved navigation image replacement the markup h1 id= logo company namespan span h1 the css h1 logo height 110px overflow hidden position relative width 560px h1 logo span background url images content 2008 03 logo gif no repeat display block height 100% left 0 position absolute top 0 width 100% basically all we are doing is absolutely positioning an image over top of the html text the reason that i like this technique is because even when images are disabled the text is still visible of course this means that you cannot use a transparent image to lay over top of the text so it will not work in all situations see the example 5 faux columns it is very common in layouts to have 2 columns next to each other with one column having a background color and the other column just being white since the columns will almost never have the same amount of content in them the easiest way to fake this is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns the markup div id= container div id= primarycontent h1primary column h1 phellip p div div id= secondarycontent h2secondary column h2 phellip p div div class= clearing div div the css div container background url images content 2008 03 content bg gif repeat y top right padding 10px 0 width 640px div primarycontent float left padding 0 10px width 400px div secondarycontent float right padding 0 10px width 200px pretty simple a containing element 2 floating columns and a clearing element so that the containing element will contain the floating columns as noted in the set a float to clear a float technique above see the example 6 css sprites css sprites is the technique of combing images to lessen the number of calls that need to be made to the server then you just shift the position of the background image to view the correct part of the image may sound complicated but it just takes a little math note in both of these examples i am using the image replacement technique discussed above example 1 for this example we are just going to have one download link that we want to replace with a nice graphic then on hover we want to change the image the markup a href= id= download download nowspan span a the css a download display block height 75px overflow hidden position relative width 150px a download span background url images content 2008 03 download gif no repeat display block height 100% left 0 position absolute top 0 width 100% a download hover span background position 0 75px as you can see from the code on hover we shift the position of the background image to view a different part of the image oh and also ie6 and 7 suck so here are the styles we are serving to them styles to ie6 and ie7 a download cursor pointer i realize that we could just put that in the regular stylesheet since it has no affect on other browsers but i prefer to move stuff like that to the ie only stylesheets styles to ie6 only a download hover background position 0 0 this is some weird bug where the images shift when you hover but then when you mouse out the images dont shift back see the example example 2 for the second example we are going to use the css sprites technique but for the entire navigation this way only one call needs to be made to the server to load the navigation we are basically creating a css sprites matrix the markup ul id= nav li id= home a href= homespan span a li li id= about a href= aboutspan span a li li id= work a href= workspan span a li li id= play a href= playspan span a li li id= contact a href= contactspan span a li ul the css ul nav background 91c6d5 float left list style none width 510px ul nav li float left ul nav a color 000 display block font size 1 5em height 38px text align center position relative ul nav span background url images content 2008 03 nav gif no repeat display block height 100% left 0 position absolute top 0 width 100% ul nav li home a width 102px ul nav li home a hover span background position 0 38px ul nav li about a width 106px ul nav li about span background position 102px 0 ul nav li about a hover span background position 102px 38px ul nav li work a width 92px ul nav li work span background position 208px 0 ul nav li work a hover span background position 208px 38px ul nav li play a width 79px ul nav li play span background position 300px 0 ul nav li play a hover span background position 300px 38px ul nav li contact a width 131px ul nav li contact span background position 379px 0 ul nav li contact a hover span background position 379px 38px that may seem crazy but it all makes sense if you take the time to think about it again we have to serve some similar styles to ie6 and 7 from the previous example styles to ie6 and ie7 ul nav a cursor pointer styles to ie6 only ul nav a hover background position 0 0 see the example in conclusion this list is definitely not exhaustive they are just the 6 that i think are extremely important what other techniques do you think are important to know 