{"authorId":"1","title":"The 6 Most Important CSS Techniques You Need To Know","slug":"the-6-most-important-css-techniques-you-need-to-know","postDate":1206924013,"expiryDate":null,"enabled":"1","fields":{"2":"<p>I thought I would give a quick tutorial, with examples, of the 6 most important CSS techniques that I think you need to know:<\/p>\n<ol>\n<li>Get a Consistent Base Font Size<\/li>\n<li>Get Consistent Margins<\/li>\n<li>Set a Float to Clear a Float<\/li>\n<li>Image Replacement<\/li>\n<li>Faux Columns<\/li>\n<li>CSS Sprites<\/li>\n<\/ol>\n<!--more-->\n<h2 class=\"replaceHeadline\">1. Get a Consistent Base Font Size<\/h2>\n\n<div class=\"codeblock\"><code>\nbody&nbsp;&#123;&nbsp;font-size:&nbsp;62.5%;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>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 <code>font-size<\/code> to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.<\/p>\n\n<p>Although I typically then set my container <code>font-size<\/code> to 1.2em, which in turn sets the <code>font-size<\/code> to 12 pixels. But still, then you know that 1em is equal to 12 pixels.<\/p>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/base-font-size\/\">See the example &raquo;<\/a><\/p>\n\n<h2 class=\"replaceHeadline\">2. Get Consistent Margins<\/h2>\n<p>There are <a href=\"http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\">some great CSS resets<\/a> out there, but I usually don&rsquo;t need one that goes so far. I like to just remove the margin and padding from every element.<\/p>\n\n<div class=\"codeblock\"><code>\nhtml,&nbsp;body,&nbsp;div,&nbsp;h1,&nbsp;h2,&nbsp;h3,&nbsp;h4,&nbsp;h5,&nbsp;h6,&nbsp;ul,&nbsp;ol,&nbsp;dl,&nbsp;li,&nbsp;dt,&nbsp;dd,&nbsp;p,&nbsp;blockquote,&nbsp;pre,&nbsp;form,&nbsp;fieldset,&nbsp;table,&nbsp;th,&nbsp;td&nbsp;&#123;&nbsp;margin:&nbsp;0;&nbsp;padding:&nbsp;0;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>Then, you can set the margins that you want accordingly.<\/p>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/get-consistent-margins\/\">See the example &raquo;<\/a><\/p>\n\n<h2 class=\"replaceHeadline\">3. Set a Float to Clear a Float<\/h2>\n\n<p>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: <strong>Set a Float to Clear a Float<\/strong>.<\/p>\n\n<p>I have created a <a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/set-a-float-to-clear-a-float\/\">simple page with two floating columns next to each other<\/a>. You will notice in the example that the grey background does not contain the floating columns. So, the easiest thing to do is to <a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/set-a-float-to-clear-a-float\/set-a-float-to-clear-a-float-fixed\/\">set the containing element to float<\/a>. But now, you will see that the container background doesn&rsquo;t contain the content area.<\/p>\n\n<p>Since the container has <code>margin: 0 auto<\/code>, 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 <a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/set-a-float-to-clear-a-float\/set-a-float-to-clear-a-float-fixed-more\/\">insert a clearing element<\/a>. In this case, I just use an empty <code>div<\/code> set to <code>clear: both<\/code>. Now, there are other ways to <a href=\"http:\/\/www.positioniseverything.net\/easyclearing.html\">clear a float without markup<\/a>, but I have noticed some inconsistencies with that technique, so I just sacrifice an empty <code>div<\/code>.<\/p>\n\n<h2 class=\"replaceHeadline\">4. Image Replacement<\/h2>\n<p>Sure, <a href=\"http:\/\/www.mezzoblue.com\/tests\/revised-image-replacement\/\">there are a lot of different image replacement techniques<\/a>. But, I think that you get to most benefits from this technique. I also discussed this technique in a previous article, <a href=\"http:\/\/trevordavis.net\/blog\/tutorial\/improved-navigation-image-replacement\/\">Improved Navigation Image Replacement<\/a><\/p>\n\n<h3 class=\"replaceHeadline\">The Markup<\/h3>\n<div class=\"codeblock\"><code>\n&lt;h1&nbsp;id=\"logo\"&gt;Company&nbsp;Name&lt;span&gt;&lt;\/span&gt;&lt;\/h1&gt;&nbsp;\n\n<\/code><\/div>\n\n<h3 class=\"replaceHeadline\">The CSS<\/h3>\n<div class=\"codeblock\"><code>\nh1#logo&nbsp;&#123;<br \/>&nbsp;height:&nbsp;110px;<br \/>&nbsp;overflow:&nbsp;hidden;<br \/>&nbsp;position:&nbsp;relative;<br \/>&nbsp;width:&nbsp;560px;<br \/>&#125;<br \/>h1#logo&nbsp;span&nbsp;&#123;<br \/>&nbsp;background:&nbsp;url(\/images\/content\/2008\/03\/logo.gif)&nbsp;no-repeat;<br \/>&nbsp;display:&nbsp;block;<br \/>&nbsp;height:&nbsp;100%;<br \/>&nbsp;left:&nbsp;0;<br \/>&nbsp;position:&nbsp;absolute;<br \/>&nbsp;top:&nbsp;0;<br \/>&nbsp;width:&nbsp;100%;<br \/>&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>Basically, all we are doing is absolutely positioning an image over top of the HTML text.<\/p>\n\n<p>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.<\/p>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/image-replacement\/\">See the example &raquo;<\/a><\/p>\n\n<h2 class=\"replaceHeadline\">5. Faux Columns<\/h2>\n\n<p>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 <strong>1px tall background image<\/strong> being repeated vertically in the containing element of the 2 columns.<\/p>\n\n<h3 class=\"replaceHeadline\">The Markup<\/h3>\n<div class=\"codeblock\"><code>\n&lt;div&nbsp;id=\"container\"&gt;<br \/>&nbsp;&lt;div&nbsp;id=\"primaryContent\"&gt;<br \/>&nbsp;&nbsp;&lt;h1&gt;Primary&nbsp;Column&lt;\/h1&gt;<br \/>&nbsp;&nbsp;&lt;p&gt;&amp;hellip;&lt;\/p&gt;<br \/>&nbsp;&lt;\/div&gt;<br \/>&nbsp;&lt;div&nbsp;id=\"secondaryContent\"&gt;<br \/>&nbsp;&nbsp;&lt;h2&gt;Secondary&nbsp;Column&lt;\/h2&gt;<br \/>&nbsp;&nbsp;&lt;p&gt;&amp;hellip;&lt;\/p&gt;<br \/>&nbsp;&lt;\/div&gt;<br \/>&nbsp;&lt;div&nbsp;class=\"clearing\"&gt;&lt;\/div&gt;<br \/>&lt;\/div&gt;&nbsp;\n\n<\/code><\/div>\n\n<h3 class=\"replaceHeadline\">The CSS<\/h3> \n<div class=\"codeblock\"><code>\ndiv#container&nbsp;&#123;&nbsp;<br \/>&nbsp;background:&nbsp;url(\/images\/content\/2008\/03\/content-bg.gif)&nbsp;repeat-y&nbsp;top&nbsp;right;<br \/>&nbsp;padding:&nbsp;10px&nbsp;0;<br \/>&nbsp;width:&nbsp;640px;<br \/>&#125;<br \/>div#primaryContent&nbsp;&#123;&nbsp;float:&nbsp;left;&nbsp;padding:&nbsp;0&nbsp;10px;&nbsp;width:&nbsp;400px;&nbsp;&#125;<br \/>div#secondaryContent&nbsp;&#123;&nbsp;float:&nbsp;right;&nbsp;padding:&nbsp;0&nbsp;10px;&nbsp;width:&nbsp;200px;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>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 <strong>Set a Float to Clear a Float<\/strong> technique above).<\/p>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/faux-columns\/\">See the example &raquo;<\/a><\/p>\n\n<h2 id=\"cssSprites\">6. CSS Sprites<\/h2>\n<p>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. <em>Note: In both of these examples, I am using the <strong>Image Replacement<\/strong> technique discussed above.<\/em><\/p>\n\n<h3 class=\"replaceHeadline\">Example #1<\/h3>\n<p>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.<\/p>\n\n<h4 class=\"replaceHeadline\">The Markup<\/h4>\n<div class=\"codeblock\"><code>\n&lt;a&nbsp;href=\"#\"&nbsp;id=\"download\"&gt;Download&nbsp;Now&lt;span&gt;&lt;\/span&gt;&lt;\/a&gt;&nbsp;\n\n<\/code><\/div>\n\n<h4 class=\"replaceHeadline\">The CSS<\/h4>\n<div class=\"codeblock\"><code>\na#download&nbsp;&#123;&nbsp;<br \/>&nbsp;display:&nbsp;block;&nbsp;<br \/>&nbsp;height:&nbsp;75px;&nbsp;<br \/>&nbsp;overflow:&nbsp;hidden;&nbsp;<br \/>&nbsp;position:&nbsp;relative;&nbsp;<br \/>&nbsp;width:&nbsp;150px;&nbsp;<br \/>&#125;<br \/>a#download&nbsp;span&nbsp;&#123;&nbsp;<br \/>&nbsp;background:&nbsp;url(\/images\/content\/2008\/03\/download.gif)&nbsp;no-repeat;&nbsp;<br \/>&nbsp;display:&nbsp;block;&nbsp;<br \/>&nbsp;height:&nbsp;100%;&nbsp;<br \/>&nbsp;left:&nbsp;0;&nbsp;<br \/>&nbsp;position:&nbsp;absolute;&nbsp;<br \/>&nbsp;top:&nbsp;0;&nbsp;<br \/>&nbsp;width:&nbsp;100%;<br \/>&#125;<br \/>a#download:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;-75px;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>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.<\/p>\n\n<p>Oh, and also, IE6 and 7 suck, so here are the styles we are serving to them:<\/p>\n\n<h5 class=\"replaceHeadline\">Styles to IE6 and IE7<\/h5>\n<div class=\"codeblock\"><code>\na#download&nbsp;&#123;&nbsp;cursor:&nbsp;pointer;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n<p>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.<\/p>\n\n<h5 class=\"replaceHeadline\">Styles to IE6 Only<\/h5>\n<div class=\"codeblock\"><code>\na#download:hover&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;0;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n<p>This is some weird bug where the images shift when you hover, but then when you mouse-out, the images don&rsquo;t shift back.<\/p>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/css-sprites\/\">See the example &raquo;<\/a><\/p>\n\n<h3 class=\"replaceHeadline\">Example #2<\/h3>\n<p>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.<\/p>\n\n<h4 class=\"replaceHeadline\">The Markup<\/h4>\n<div class=\"codeblock\"><code>\n&lt;ul&nbsp;id=\"nav\"&gt;<br \/>&nbsp;&lt;li&nbsp;id=\"home\"&gt;&lt;a&nbsp;href=\"#\"&gt;Home&lt;span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>&nbsp;&lt;li&nbsp;id=\"about\"&gt;&lt;a&nbsp;href=\"#\"&gt;About&lt;span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>&nbsp;&lt;li&nbsp;id=\"work\"&gt;&lt;a&nbsp;href=\"#\"&gt;Work&lt;span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>&nbsp;&lt;li&nbsp;id=\"play\"&gt;&lt;a&nbsp;href=\"#\"&gt;Play&lt;span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>&nbsp;&lt;li&nbsp;id=\"contact\"&gt;&lt;a&nbsp;href=\"#\"&gt;Contact&lt;span&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;<br \/>&lt;\/ul&gt;&nbsp;\n\n<\/code><\/div>\n\n<h4 class=\"replaceHeadline\">The CSS<\/h4>\n<div class=\"codeblock\"><code>\nul#nav&nbsp;&#123;&nbsp;background:&nbsp;#91c6d5;&nbsp;float:left;&nbsp;list-style:&nbsp;none;&nbsp;width:&nbsp;510px;&nbsp;&#125;<br \/>ul#nav&nbsp;li&nbsp;&#123;&nbsp;float:&nbsp;left;&nbsp;&#125;<br \/>ul#nav&nbsp;a&nbsp;&#123;&nbsp;color:&nbsp;#000;&nbsp;display:&nbsp;block;&nbsp;font-size:&nbsp;1.5em;&nbsp;height:&nbsp;38px;&nbsp;text-align:&nbsp;center;&nbsp;position:&nbsp;relative;&nbsp;&#125;<br \/>ul#nav&nbsp;span&nbsp;&#123;&nbsp;background:&nbsp;url(\/images\/content\/2008\/03\/nav.gif)&nbsp;no-repeat;&nbsp;display:&nbsp;block;&nbsp;height:&nbsp;100%;&nbsp;left:&nbsp;0;&nbsp;position:&nbsp;absolute;&nbsp;top:&nbsp;0;&nbsp;width:&nbsp;100%;&nbsp;&#125;<br \/><br \/>ul#nav&nbsp;li#home&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;102px;&nbsp;&#125;<br \/>ul#nav&nbsp;li#home&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;-38px;&nbsp;&#125;<br \/><br \/>ul#nav&nbsp;li#about&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;106px;&nbsp;&#125;<br \/>ul#nav&nbsp;li#about&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-102px&nbsp;0;&nbsp;&#125;<br \/>ul#nav&nbsp;li#about&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-102px&nbsp;-38px;&nbsp;&#125;<br \/><br \/>ul#nav&nbsp;li#work&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;92px;&nbsp;&#125;<br \/>ul#nav&nbsp;li#work&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-208px&nbsp;0;&nbsp;&#125;<br \/>ul#nav&nbsp;li#work&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-208px&nbsp;-38px;&nbsp;&#125;<br \/><br \/>ul#nav&nbsp;li#play&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;79px;&nbsp;&#125;<br \/>ul#nav&nbsp;li#play&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-300px&nbsp;0;&nbsp;&#125;<br \/>ul#nav&nbsp;li#play&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-300px&nbsp;-38px;&nbsp;&#125;<br \/><br \/>ul#nav&nbsp;li#contact&nbsp;a&nbsp;&#123;&nbsp;width:&nbsp;131px;&nbsp;&#125;<br \/>ul#nav&nbsp;li#contact&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-379px&nbsp;0;&nbsp;&#125;<br \/>ul#nav&nbsp;li#contact&nbsp;a:hover&nbsp;span&nbsp;&#123;&nbsp;background-position:&nbsp;-379px&nbsp;-38px;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p>That may seem crazy, but it all makes sense if you take the time to think about it.<\/p>\n\n<p>Again, we have to serve some similar styles to IE6 and 7 from the previous example:<\/p>\n\n<h5 class=\"replaceHeadline\">Styles to IE6 and IE7<\/h5>\n<div class=\"codeblock\"><code>\nul#nav&nbsp;a&nbsp;&#123;&nbsp;cursor:&nbsp;pointer;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<h5 class=\"replaceHeadline\">Styles to IE6 Only<\/h5>\n<div class=\"codeblock\"><code>\nul#nav&nbsp;a:hover&nbsp;&#123;&nbsp;background-position:&nbsp;0&nbsp;0;&nbsp;&#125;&nbsp;\n\n<\/code><\/div>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/important-css-techniques\/css-sprites\/\">See the example &raquo;<\/a><\/p>\n\n<h2 class=\"replaceHeadline\">In Conclusion<\/h2>\n<p>This list is definitely not exhaustive; they are just the 6 that I think are extremely important. <strong>What other techniques do you think are important to know?<\/strong><\/p>","14":{"old_id":{}}}}