The 6 Most Important CSS Techniques You Need To Know
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.
2. Get Consistent Margins
There are some great CSS resets out there, but I usually don’t 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.
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 doesn’t 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 Name<span></span></h1>The CSS
h1#logo {
height: 110px;
overflow: hidden;
position: relative;
width: 560px;
}
h1#logo span {
background: url(/wp-content/uploads/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.
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">
<h1>Primary Column</h1>
<p>…</p>
</div>
<div id="secondaryContent">
<h2>Secondary Column</h2>
<p>…</p>
</div>
<div class="clearing"></div>
</div>The CSS
div#container {
background: url(/wp-content/uploads/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).
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 Now<span></span></a>The CSS
a#download {
display: block;
height: 75px;
overflow: hidden;
position: relative;
width: 150px;
}
a#download span {
background: url(/wp-content/uploads/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 don’t shift back.
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="#">Home<span></span></a></li>
<li id="about"><a href="#">About<span></span></a></li>
<li id="work"><a href="#">Work<span></span></a></li>
<li id="play"><a href="#">Play<span></span></a></li>
<li id="contact"><a href="#">Contact<span></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(/wp-content/uploads/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; }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?
Refering to #2, I always use *, html, body{marign:0;padding:0;} but never found any documentation as to what and how well browsers support the wildcard *. Do you know anything about that?
Be careful resetting the margins and padding on all elements (especially stuff such as lists) or even using a reset without a full set of defaults when working with systems that allow dynamic content. I’ve repeatedly seen cases where people have reset margins and padding and styled up their nav lists/etc but then failed to provide default styling for in-content lists, resulting in a page (especially when nested). I’ve found that Blueprint CSS minus the grids system gives a great starting point with not only a competent reset but a reliable set of default styles to match.
Otherwise great tips!
Interesting article. Hope the next 6 techniques will follow. My clear method is here:
http://www.quirksmode.org/css/clearing.html
My wish: A good way to set centered text in buttons (for IE6, too)
I think that bug on IE when making a CSS sprite happens only when xml declaration is missing.
I noticed there are a lot of differences working in Quirks Mode or not.
Good list Trevor, thanks.
Incidentally, I thought I’d just let you know that this page is crashing my Firefox (damn you for making me resort to IE7). I’m running 2.0.0.13 and it just vanishes when the page has loaded, each time I try.
Anyone else?
@Matt Andrews-
Damn Realplayer, stop messing with my site! Glad that it’s not actually my site that is crashing everyone’s Firefox.
@Matt Radel-
You can certainly do image replacement using a negative
text-indent, but if images are disabled, you don’t still get the text like you do using the emptyspanmethod.Whoops, I forgot to update the time in Wordpress for Daylight Savings Time.
@Johannes-
I would try and avoid using
* { margin: 0; padding: 0; }, it takes more time to process that since it has to access every single element.@Mark-
I always style defaults for everything that I remove the margin and padding for. Good tip though!
@Andreas-
Do you mean vertically aligning the buttons? I just recently found out that you can actually use
vertical-align: middle;for buttons elements, and the will line up with the other form elements.@Nemesis Design-
Hmm, I always work in Standards compliance mode.
@Matt-
I wonder if it has to do with so many instances of sIFR on the page?
* { margin:0; padding:0; } is not good also beacause cause a ugly visualizzations of elements on firefox.
@ Trevor: i’m not saying you don’t work in standard compliance mode, beacause the xml declaration is optional.
If you try to put xml declaration in your example pages you will see that some behaviors in IE are different.
I meant IE 6 strange behavior:
http://www.quirksmode.org/css/quirksmode.html
“Explorer Windows special: the xml prolog”
In that case IE6 behavior is different and you don’t have to put “cursor: pointer” rule.
Trevor: Would you believe it was a damned Realplayer plugin (I didn’t know such things existed – on my family computer at the moment)? It pops up an annoying toolbar over Flash videos so perhaps the sIFR stuff did confuse it. All fixed now!
Great post! Very well written. One thing though – you can actually do image replacement on a block level element (with specific dimensions) without the extra span tag. Just keep the “overflow:hidden” on the element along with a “text-indent: -999em”. Presto! Replaced text, no extra span tag.
Cheers!
Nice tips.
Regarding #3 though, can’t you just add a CSS rule of overflow: auto to the container div?
SUPER IMPORTANT: Image replacement techniques are considered spam techniques by Google and possibly Yahoo search. They count negatively to your search rankings.
What happened was guys like us invented that technique (Fahrner was his name?) and then the spam guys realized they could use it for their nefarious purposes. Google caught wind of the technique, and now it’s considered negative.
Google can read your CSS, and knows things like whether or not an image is covering your text, etc.
Use with caution and only when SEO is not a factor.
@Niall-
Yes, setting
overflow: autois one way of clearing floats, but again, I have seen mixed results.@David-
I’ve seen some notes about this, but nothing definitive that it hurts your rankings. Do you have a source that you have found this information? Think about all of those people using image replacement techniques on their sites. I can’t imagine Google would penalize that many people. Last I saw, they flag it, and if you are stuffing more text into the markup than you are displaying in the image replacement, then it may hurt your ranking.
Regarding #2, Eric Meyer maintains a neat reset stylesheet that does all of this in a less intrusive and more performance-friendly manner …
Regarding #3, the best way to clear a floated element is to apply the following CSS rules to the containing element, negating the need for additional HTML elements …
For good browsers:
div#content:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
For IE 6/7:
div#content { zoom: 1; }
You should note as well that IE 6/7 uses the zoom proprty to add ‘hasLayout’, so adding ‘zoom: 1;’ in your IE 6/7 stylesheet will solve many of your problems, while adding no positional or dimensional information.
Excellent technique Ben! Thanks! :)
Wonderful work, thanks a lot.. :-)
#3
clearing floats always works with overflow:auto;
BUT !
you have to give the element a width to force the browser to compute the height of the element.
if you can’t give a width to the container, then you’re right about using the extra div.
@David Matt Cutts at Google indicated that CSS image replacement was OK from an SEO point of view – see seomoz.com
Useful list there Trevor, thanks. Never thought about your method of image replacement, always used a span with display:none or positioned the span -9999px, but it’s a good point about images being turned off.
Cheers
Great tips!
I used to use the * {margin:0;}, but I don’t think I will this time around… I’ll see how I go, but a lot of the margins and padding that are already there are pretty good.
I always wondered why 62.5%!!! I tried it recently and the text was way too small, I wondered what the heck people were thinking. 10px is what they were thinking. :) I didn’t know that IE didn’t allow you to change the pixel size. :(
More comments (and issues) over at Hacker News: http://news.ycombinator.com/item?id=150983
Good CSS tips, thanks for the explanations and examples.
RE: propertes reset, I believe Eric Meyer has a set of code for setting the properties from scratch to build up your own template.
Hi! I created a blog post recently, that goes into more details on #3 and explains it a little bit:
http://devorbit.net/english/css-designs-using-float/
To the rest of your list: Looks good. Mine looks pretty much the same! I just never wrote them down like that :)
A lot of your techniques match up with Yahoo’s YUI approach. The have a reset.css that does much of what you are describing. Their approach is to take the browser differences out of the equation when building commercial pages. I would check it out over at Yahoo’s developer site. They even have some Engineer videos describing usage. Better hurry before Microsoft gobbles them up.
http://developer.yahoo.com/yui/
Cheers.
@Scot-
Yes, I’ve seen the YUI stuff before. Sometimes though, these resets do more than you want them too. Like Eric Meyer’s reset is awesome, but if I am only to get consistent margins, I don’t want to change the
buttonelement. Know what I mean? Sometimes it is ok for things to look slightly different in different browsers. It’s not like the customer brings up two different browsers to compare the page.Regarding #1. Because Internet Explorer dosen’t do half percentages in declarations a better way of doing it is to do like this.
html{
font-size: 125%;
}
body{
font-size: 50%;
}
If you look at http://www.icaaq.com/flexible-assistant-the-old-way.htm and clicks the figure it out button you can see it’s not accurate in IE. But if you look at http://www.icaaq.com/flexible-assistant.htm it’s correct.
@icaaq-
Very interesting. Although .72 of an em is basically nothing. I’ll have to give this a try on a project sometime.
STUMBLED!
Thats a fantastic tutorial.
VOTED for this post here
I am wondering why you are using ID’s for everything, the lists also. In the examples I didn’t see them being used — maybe I overlooked it.
I think I’m applying it wrong but it seems unnecessary for the clears at the start, I thought you could just do a * {margin: 0; padding: 0;} or maybe it’s
*html, body — Apologies I ‘m a bit rusty
@Jesse-
I am using ID’s for those elements because they are unique on the page. I am using them in the CSS Sprites example to position the background image accordingly.
In regards to the
* {margin: 0; padding: 0;}. This is really not an ideal way to zero out the margin and padding. It takes more time to process, and it also effects every single element, including form elements. As Eric Meyer said at An Event Apart, “What would you expect to happen if you added padding to a radio button?” Form elements are a little different than other elements.great article
awesome tips. ;) I’ve just learned a few new things.
Faux Columns is something i have to take action now in my Site. Thanks for sharing..
Just for future reference, image replacement could be made easier by selecting a header in the first place rather than a div inside it. This is good (like you used) for h1’s to help index important page titles… anyway, an easier method would simply be…
h1 #logo {
width: x px
height: ypx;
background-image: url(url);
text-indent: -9999px;
}
I also think a cleaner method could be to just set the font size to 0.
Buz-
Yes, that is one method of image replacement, but the one downside to that method, is that if images are disabled, you cannot see the regular HTML text. With the method I show above, if images are disabled, the text is still visible.
The best way to clear float is with the clearfix technique.
I’ve had good luck clearing out the margins and padding with
*{
padding:0px; margin:0px;
}
at the top of my code.
Clearing floats without extra markup is easy.
1) Make sure the containing element has an overflow other than visible so overflow:auto or overflow:hidden would work. The container also needs a height set in order for it to work in IE. If you don’t have a specific height just use height:100%. It cannot be height:auto;
2) Float the elements inside the container as needed. Experiment with clear:left, clear:right, or clear:both as needed to prevent stair stepping and other oddities.
E-mail me if you need examples. I absolutely hate empty elements with clear=all in them! Grrrrrrrrr….
@Denver Web Design-
Like I said in a previous comment, using
* { margin: 0; padding: 0; }is dangerous because it effects every single element.How would you expect a radio button to act if padding was removed? Form elements get a little tricky and sometimes are best left alone. Also, it takes longer to process the universal selector because it has to access every single element, rather than specifying the elements you want to remove the margin and padding from.
@Russell Heimlich-
Yep, it is easy to clear floats without markup. But the issue is consistency and working in all situations. There are times when using the techniques without markup can cause issues between browsers or depending upon whether or not the elements have a width specified, etc. The easiest way that works 100% of the time is to just add in an empty clearing element.
I am all for semantics and standards, but sometimes you just need to get it done. Jeff Croft wrote a great post about this: On standards, Web Standards, and “standardistas”.
Great Tutorial
I agree IE 6 & IE 7 suck.
Nice Reset Too.
Thanks
Pablo Esquivel
fantastic article! Will really start to beef up my css..
The essential is here. In my del.icio.us bookmarks :)
Trevor, that’s an interesting point regarding image replacement and the text still being there when images are turned off – I hadn’t considered it, thanks.
Nice work, by the way :0)
nice work, i appreciate
re: Set a Float to Clear a Float
Wonderful stuff…thanks TD!
I use break with clear: both defined..please tell me the drawbacks with that (am not a seasoned csser) Thanks.
Great stuff! i will be experimenting with these tips. Well done Trev
Good stuff over here! Question: How can I show an active state for my css-sprites in a 3 state situation. EG: (Skinny Text) (Skinny Text) (Bold Text, Denotes site location) ?
Thanks man.
An example would be Peachpit.com
@Boogaloo Man-
The Peach Pit site really only has 2 states. The hover and current section of the website are using the same properties.
So just put a class of current on the link when you are in that section and give it the same properties as the hover state.
Let me know if I misunderstood what you are asking.
Hey Trevor,
In hindsight that was a poorly prosed question. Somehow you managed to hit the bulls eye. To understand it, further inspection towards the mother of all css sprites at Apple.com had to be conducted. I’ll let you know how it works out. Right on, thanks
Excellent article, Trevor!
About #3 — What inconsistencies have you noticed using clearfix? I have been using it for the last 3 or so years and have never had a problem with it. I do see a problem with inserting extra divs to clear floats. Very messy and unprofessional. I think you may be not understanding clearfix entirely.
Nice article, thanks
Hi Trevor,
I’ve been using * { margin=0px; padding=0px; } for about 3 years now and don’t see any issues so far.
What are the real problems involved?
@Petroni-
Using
* { margin: 0; padding: 0; }takes more time to process since it has to hit every single element. Also, you probably don’t want it to hit all form elements. What would you expect to happen if you remove the margin and padding from radio buttons and checkboxes? It could cause some unexpected results.Awesome article I’m going to share it with all my coders..
Thanks Again!!!
* { margin:0 ; padding: 0; }
this is will work on all the elements on the page, not ALL documented/unused elements..
so if you have only , , and on your page, only those elements will have margin:0 and padding: 0..
i’ve been using this for many years now and i don’t see any reason why i should change it. besides, all my form elements have styles..
mortred,
Feel free to read some of the comments to see that the issue of resetting the whole page has been addressed several times. Including in the first two comments, if you can’t be bothered to read all of them.
Very nice tips, thank you!
Thank you for this great tip.
I tried to follow your codes in similar way, but the issue is that the image wouldn’t appear – in other word, i only can see text, but not image itself. Do you have any idea to why it behaves like this?
thank you again!
@Jos-
Do you have a link that we can see? Are you sure that you referenced the image correctly?
it is still in experiment stage – i am using zencart – i sort of modify the code the way it should show nav menu – i have double checked – the images are referenced correctly..
http://peepahole.lifeisaboutloving.com/shop/
@Jos-
Hmm, it looks like it is trying to load the image from here, but I believe this is the image that you want to use.
I would use full paths instead of relatively referencing it.
Also, I’m not clear on why you are adding the background image to the ul and not the anchors within it.
Thank you very much for the quick replies!
Yes, this is the image I wanted to use…
anchors — i did both anchors and background image to ul in a different ways..to see if image appeared or not.
so with your quick help, I can go change path and change some codes.
thank you again ^_^v
Almost close. I am wondering why the nav menu doesn’t appear as the image I created?
For an example, it should show baby dolls | pants | etc
but right now, it shows all baby dolls.
Also could you please check if css looks okay? or perhaps any suggestion to keep it clean?
Thank you again :)
@Jos-
You need to position the background image for each anchor.
Thank you for your help.
it still doesn’t work even if i position background image for each anchor. you will see 1st menu on left side to roll over but not others. Also the menu isn’t arranged in an order. It puzzles me.
Thank you
@Jos-
It looks like you have some errors in your code. For example
You’ve got one too many # signs. Also, you are specifying the background-image property but giving both background-image and background-repeat. I would recommend validating your code whenever you encounter problems like this.
Nice Post :D
Thankyou for sharing
Biju Subhash
i am new to css. Can anybody give tips to begin css
Beautiful script, however you should mention you need to include: margin: 0; padding: 0; in the top ul#nav like so:
Otherwise you will have a space before your nav bar unless you use all of the other code in examples 1-4 to set the margin and padding ahead of time. Took me a wuite while to debug this o I hope it helps someone else…
On Tip #6 CSS Sprites – How would you center the links vertically if the person has images off? (currently they are at the very top of the image box)
@Keith W-
You would change the line height of the anchors to be the same as the height.
For example:
nice, really nice!
Interesting post. Thanks for sharing this techniques.
Very Nice Post/Tutorial!
I like to know if I can translate your post for my language (portuguese) and put in my blog with your credits!
Wait for response!
Matheus
@Matheus-
Sure, as long as you can give credit to the original article with a link.
Thank you for this small tutorial on css sprites, I have seen them implemented in the past, but have yet to incorporate them into one of my own designs. You have given me a transparent enough start to get going. Thanks.
Essential. thanks alot.
I don’t like to rely on the 62.5% technique, specially for setting element sizes, ’cause the browser’s standard font size (16px) can be changed. I usually set a fixed px size and if needed, offer text resizing via javascript.
@Ricardo-
Yep, as this article is more than a year old, I have started using pixels as well. Especially since more and more browsers are using page zoom.
Hello,
Regarding 1. Get a Consistent Base Font Size, why not just use pixels in the CSS rather than %/em then?
Could you please explain?
Thanks a million.
@Harry Fear-
As I said in my previous comment, this article is over a year old, so there are other ways of doing things.
But, the reason that you use %/em instead of pixels is so that the text is scalable in IE. Personally, I use pixels, and then soft serve EMs for IE.
“1. Get a Consistent Base Font Size” is somewhat flawed. We are setting default font to be 10px to make our development experience easier in terms of math. Then, you still have to pump the font size to 1.2em on the
.container.Why not just set the body to be:
body { font-size: 75%; }This way,
.containeris already at what your 1.2em style does. There’s no reason to use 62.5% this way.Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.
@jono
Because if you set it as 67.5%, the math is absurdly simple everywhere else. I want 18px headlines? Set them to 1.8em and ta-dah!
I thought i was doing it right, obviously i wasn’t. Good tips, thanx
very useful…previously i was looking for the font size problem solution…you first example does that…many thanks….
Great suggestions.
Nice post…..really a hard work
but i have some queries
1:Is there any CSS property to make font smooth in IE?
2:how to creeate IE 6 friendly png graphics??
waiting for your reply
thanks for the post
I have a div with a dynamically populated table in which each cell has links. The div floats right next to another floating div on the left. I found this page that solved my problem of stretching the rest of the site as the table grows using the empty div with clear both, but now all of the links in my table are unclickable. I can’t even highlight the text. It’s like the empty div is covering the whole thing. So I tried putting visibility none, z-index -100, and height/width 0, but nothing works.
Any ideas?
@Longshot-
Huh? Do you have a link?
@Trevor-
Wow you’re awesome for replying so fast. I don’t have a link because it’s on an internal development server. I fixed my problem a few seconds ago.
My mistake was that I put the clear div at the bottom of my floating divs instead of after them inside the containing div.
What threw me off was that everything looked and appeared just right, and the links even worked in IE8 but they didn’t work in Firefox 3.5.7.
Thanks for writing your blog.