The 6 Most Important CSS Techniques You Need To Know

Published: 03.30.2008
Categories: Tutorial
Comments: 155

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

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 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(/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">
  <h1>Primary Column</h1>
  <p>&hellip;</p>
 </div>
 <div id="secondaryContent">
  <h2>Secondary Column</h2>
  <p>&hellip;</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 Now<span></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 don’t 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="#">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(/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?

155 Comments

seo g

04.01.2008

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.

links for 2008-04-01 at James A. Arconati

04.01.2008

[...] Trevor Davis | Blog | 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: 1. Get a Consistent Base Font Size 2. Get Consistent Margins 3. Set a Float to Clear a Float 4. Image Replacement 5. Faux Columns (tags: blogs reference web-developer web-developer/css tips) [...]

Johannes Neumeier

04.01.2008

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?

Mark James

04.01.2008

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!

Andreas Blaschke

04.01.2008

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)

Nemesis Design

04.01.2008

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.

Matt Andrews

04.01.2008

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?

Trevor

04.01.2008

@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?

Nemesis Design

04.01.2008

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

Nemesis Design

04.01.2008

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.

Matt Andrews

04.01.2008

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!

Matt Radel

04.01.2008

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!

Trevor

04.01.2008

@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 empty span method.

Whoops, I forgot to update the time in Wordpress for Daylight Savings Time.

Niall Doherty

04.01.2008

Nice tips.

Regarding #3 though, can’t you just add a CSS rule of overflow: auto to the container div?

David Worley

04.01.2008

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.

The 6 Most Important CSS You Need To Know | eKini:

04.01.2008

[...] Everyone should read this. [...]

Trevor

04.01.2008

@Niall-
Yes, setting overflow: auto is 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.

Ben Sekulowicz-Barclay

04.01.2008

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.

Fred Wu

04.01.2008

Excellent technique Ben! Thanks! :)

Vincenzo

04.01.2008

Wonderful work, thanks a lot.. :-)

Coolness roundup #6: Grid-based & CSS flisterz

04.01.2008

[...] them are redundant but it worth checking out. Here are some of them : 8 Premium One Line CSS Tips, 6 most important CSS techniques and Most used CSS trick. If you have lots of time to spare, check out 101 CSS techniques of all [...]

Frederik Van Zande

04.01.2008

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

DavidM

04.01.2008

@David Matt Cutts at Google indicated that CSS image replacement was OK from an SEO point of view - see seomoz.com

Lee

04.01.2008

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

kristaerella

04.01.2008

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

nathan1

04.01.2008

More comments (and issues) over at Hacker News: http://news.ycombinator.com/item?id=150983

links for 2008-04-01 « toonz

04.01.2008

[...] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know (tags: css tips tutorial) [...]

Chris Carlson » links for 2008-03-31

04.01.2008

[...] The 6 Most Important CSS Techniques You Need To Know (tags: css webdesign) 06:45:45 pm on March 31, 2008 | # | [...]

links for 2008-04-01 | Funny Stuff is all around

04.01.2008

[...] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know (tags: CSS tips webdesign design tutorial Techniques tutorials) [...]

links for 2008-04-02

04.01.2008

[...] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know 6 CSS pointers. (tags: css) [...]

Sebastian H

04.01.2008

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 :)

Entradas en las blogosferas.64 - Carrero BitÃ¡co

04.02.2008

[...] Las 6 cosas mÃ¡s importante sobre tÃ©cnicas CSS que necesitas saber. (en inglÃ©s). vÃa: trevordavis [...]

Great Resources Elsewhere: March 21 to March 28 -

04.04.2008

[...] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know [...]

TÃ©cnicas CSS — Tablosign

04.04.2008

[...] Davis nos explica las 6 tÃ©cnicas CSS mÃ¡s importantes que deberÃamos conocer. [...]

Fatih HayrioÄŸlu’nun not defteri » 0

04.05.2008

[...] CSS’de bilmemiz gerek 6 teknik. BaÄŸlantÄ± [...]

×‘×œ×•×’×” ×©×œ ××ž× &ra

04.08.2008

[...] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know (tags: css css-tips) [...]

css de bilmeniz gereken 6 teknik - Volkan Åžent

04.08.2008

[...] http://trevordavis.net/blog/tutorial/the-6-most-important-css…/ You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

Scot

04.08.2008

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.

Trevor

04.08.2008

@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 button element. 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.

Sometimes its KEY to get the TOP tips! CSS in this

04.11.2008

[...] clipped from trevordavis.net [...]

faaabulous » 6 techniques CSS qu’il fa

04.15.2008

[...] Trevor Davis a publiÃ© un article trÃ¨s utile pour tous les designers web dans lequel il dÃ©taille, exemples Ã l’appui, 6 techniques CSS indispensables dont voici la liste: [...]

icaaq

04.17.2008

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.

Trevor

04.18.2008

@icaaq-
Very interesting. Although .72 of an em is basically nothing. I’ll have to give this a try on a project sometime.

Valontuoja » Blog Archive » Kaoottinen

04.19.2008

[...] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know [...]

Top Stumbles - Best of StumbleUpon

04.21.2008

Trevor Davis | Blog | 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:

1. Get a Consistent Base Font Size
2. Get Consistent Margins
3. Set a Float to Clear a Float
4. Image Replacement…

Geoserv

04.21.2008

STUMBLED!

Thats a fantastic tutorial.

VOTED for this post here

NightAngel.fr » CSS : 50 Outils, 13 raisons,

04.22.2008

[...] changement de taille au niveau de la balise parent. Je me suis notamment inspirÃ© d’un article de Travor Davis pour la rÃ©daction du prÃ©sent billet. Les nombreux liens trÃ¨s intÃ©ressants ont [...]

Jesse

04.23.2008

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

Trevor

04.23.2008

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

SigT

04.27.2008

Las 6 tÃ©cnicas de CSS mÃ¡s importantes que debes conocer…

Aunque no tiene porque ser exhaustiva, como bien dice su autor, se hace lectura recomendada “The 6 Most Important CSS Techniques You Need To Know“.

En ella se relatan seis tÃ©cnicas de CSS que si bien no son imprescindibles, son importante…

SÃ©lection de liens web intÃ©ressants 28-04-08

04.28.2008

[...] techniques CSS pour commencer la semaine. Un lien qui fait office de memento : Techniques importantes de dÃ©veloppement CSS. Cet article a le mÃ©rite de rÃ©unir les bonnes pratiques : CSS reset, [...]

6 tÃ©cnicas de CSS que debes conocer | Pere MAJO

04.28.2008

[...] Aunque no tiene porque ser exhaustiva, como bien dice su autor, se hace lectura recomendada â€œThe 6 Most Important CSS Techniques You Need To Knowâ€œ. [...]

pos

04.28.2008

great article

Jenny

04.29.2008

awesome tips. ;) I’ve just learned a few new things.

Best Of April 2008 | Best of the Month | Smashing

04.30.2008

[...] The 6 Most Important CSS Techniques You Need To KnowThe article covers getting a consistent base font size, getting consistent margins, setting a float to clear a float, image replacement, faux columns and CSS Sprites. [...]

NETTUTS - Web development tutorials and links - Be

04.30.2008

[...] Visit Tutorial [...]

ijajaja

05.01.2008

Faux Columns is something i have to take action now in my Site. Thanks for sharing..

des84 - Internet level 2 » Blog Archive &raq

05.01.2008

[...] The 6 Most Important CSS Techniques You Need To Know Posted by Pablo Davi Filed in [...]

Kantongin » Best Of April 2008

05.02.2008

Buz

05.02.2008

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.

Trevor

05.02.2008

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.

website design

05.05.2008

The best way to clear float is with the clearfix technique.

Denver Web Design

05.05.2008

I’ve had good luck clearing out the margins and padding with
*{
padding:0px; margin:0px;
}

at the top of my code.

16 Web Designer/Developer Resources | Outlaw Desig

05.07.2008

[...] Trevor Davis offers his 6 most important css techniques that everyone needs to know. I happen to agree with him on most of these! [...]

Russell Heimlich

05.07.2008

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

Trevor

05.07.2008

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

Web Marketing

05.07.2008

Great Tutorial
I agree IE 6 & IE 7 suck.
Nice Reset Too.

Thanks
Pablo Esquivel

Best Of April 2008 - Glimpses of the Aleph

05.09.2008

Web Design

05.10.2008

fantastic article! Will really start to beef up my css..

Varios links para desarroladores web » Comen

05.10.2008

[...] The 6 Most Important CSS Techniques You Need To Know [...]

Maxime

05.14.2008

The essential is here. In my del.icio.us bookmarks :)

Web Design Glasgow

05.16.2008

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)

compwrite

05.16.2008

nice work, i appreciate

Arun

05.28.2008

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.

Colin Miller - Freelance web designer

05.30.2008

Great stuff! i will be experimenting with these tips. Well done Trev

Boogaloo Man

06.05.2008

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

Trevor

06.05.2008

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

Boogaloo Man

06.05.2008

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

Buenos Aires de DiseÃ±o » Blog Archive &ra

06.11.2008

[...] Â» ExplicaciÃ³n extendida en inglÃ©s [...]

Janko

06.17.2008

Excellent article, Trevor!

DRoss

08.24.2008

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.

10 Principles of the CSS Masters - NETTUTS

08.25.2008

[...] Trevor’s flagship article The 6 Most Important CSS Techniques You Need To Know, he’s added a nugget that can save many headaches when using columns in your layouts. I have [...]

css immersion « Niellemc’s Weblog

08.26.2008

[...] http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/ [...]

Blah! » Blog Archive » Trevor Davis |

08.26.2008

[...] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know insert a clearing element [...]

crawlspace|media » Blog Archive » Dail

08.27.2008

10 Principles of the CSS Masters « Tony̵

08.27.2008

[...] Trevor’s flagship article The 6 Most Important CSS Techniques You Need To Know, he’s added a nugget that can save many headaches when using columns in your layouts. I have [...]

Anthony Damasco

08.27.2008

Nice article, thanks

Kadir GÃœNAY | amatÃ¶r ruhlu platform »

08.29.2008

[...] Bilinmesi gereken 6 CSS tekniÄŸi - Trevor Davis [siteye git] [...]

Petroni

08.29.2008

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?

Trevor

08.29.2008

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

michaelaustinproductions.com

09.17.2008

Awesome article I’m going to share it with all my coders..
Thanks Again!!!

The 6 Most Important CSS Techniques You Need To Kn

09.18.2008

[...] Source: Trevor Davis; Date: 2008 / 30 [...]

mortred

10.09.2008

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

kristarella

10.09.2008

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.

Want to dabble in web design? :

10.19.2008

[...] The 6 Most Important CSS Techniques You Need to Know [...]

Devigner » Blog Archive » [è¯‘]CSS

10.28.2008

[...] 5. Set a float to clear a float - Trevor Davis 5. è®¾ä¸€ä¸ªæµ®åŠ¨æ¸…ä¸€ä¸ªæµ®åŠ¨ “Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too.” “æµ®åŠ¨å¯èƒ½æ˜¯ç†è§£CSSæœ€é‡è¦çš„ä¸œè¥¿ï¼Œä½†äº†è§£å¦‚ä½•æ¸…æµ®åŠ¨åŒæ ·é‡è¦ã€‚” “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 toinsert 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.” ” å› ä¸ºå®¹å™¨æœ‰margin: 0 autï¼Œæˆ‘ä»¬ä¸èƒ½æµ®åŠ¨å®ƒï¼Œå› ä¸ºå®ƒä¼šç§»åŠ¨åˆ°å¦ä¸€è¾¹ã€‚å› æ¤ï¼Œå¦ä¸€ä¸ªåŠžæ³•æ˜¯æ’å…¥ä¸€ä¸ªæ¸…é™¤å…ƒç´ ã€‚åœ¨è¿™ä¸ªä¾‹åé‡Œï¼Œæˆ‘æ£æ˜¯ç”¨äº†ä¸€ä¸ªç©ºdivè®¾ä¸ºclear: bothã€‚çŽ°åœ¨è¿˜æœ‰ä¸€ä¸ªåŠžæ³•ä¸éœ€è¦æ ‡ç¾æ¸…æµ®åŠ¨ï¼Œä½†æˆ‘æ³¨æ„åˆ°ä½¿ç”¨è¿™ä¸ªæŠ€æœ¯æœ‰ä¸€äº›ä¸ä¸€è‡´çš„åœ°æ–¹ï¼Œå› ä¸ºæˆ‘åªèƒ½ç‰ºç‰²ä¸€ä¸ªç©ºdivã€‚” (å‡ºè‡ªtrevor08å¹´3æœˆçš„æ–‡ç« http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/Â ) [...]

Wordpresså·¥ä½œå®¤ » Blog Archive &

11.03.2008

[...] (å‡ºè‡ªtrevor08å¹´3æœˆçš„æ–‡ç« http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/ ) [...]

Kayla

12.07.2008

Very nice tips, thank you!

Jos

12.09.2008

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!

Trevor

12.09.2008

@Jos-
Do you have a link that we can see? Are you sure that you referenced the image correctly?

Jos

12.09.2008

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/

Trevor

12.09.2008

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

Jos

12.09.2008

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

Jos

12.09.2008

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 :)

Trevor

12.09.2008

@Jos-
You need to position the background image for each anchor.

Jos

12.09.2008

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

Trevor

12.09.2008

@Jos-
It looks like you have some errors in your code. For example

li##dress a
{
background-image:url('http://peepahole.lifeisaboutloving.com/shop/includes/templates/peepahole/images/test.jpg')no-repeat;
} 

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.

Biju Subhash

01.05.2009

Nice Post :D
Thankyou for sharing

Biju Subhash

10 Principios de los maestros en CSS « notic

02.10.2009

[...] el artÃculo de Trevor â€œLas 6 tÃ©cnicas mÃ¡s importantes de CSS que necesitas saberâ€ [link] ha aÃ±adido un apartado que te puede ahorrar muchos dolores de cabeza al usar columnas en tus [...]

badri

03.27.2009

i am new to css. Can anybody give tips to begin css

æˆ‘æƒ³ç½‘ » Blog Archive »

04.01.2009

[...] åŽŸæ–‡åœ¨è¿™é‡Œ ï¼Œ ä½œè€…å°†ä»–è®¤ä¸ºæœ€é‡è¦çš„6ä¸ªCSSæŠ€å·§åŠ ä»¥ä¾‹åå’Œæ–‡å—è¯´æ˜Žå±•ç¤ºç»™å¤§å®¶ï¼Œåœ¨æˆ‘çœ‹æ¥ï¼Œä½œè€…è®¤ä¸ºçš„æœ€é‡è¦çš„6ä¸ªCSSæŠ€å·§å…¶å®žæ˜¯æœ€æ™®é€šï¼Œæœ€å¸¸ç”¨çš„å‡ ä¸ªæŠ€å·§ï¼Œåˆ—è¡¨å¦‚ä¸‹ï¼Œå¦‚æžœä½ è¿˜ä¸ç†Ÿæ‚‰è¿™äº›æŠ€å·§ï¼Œå¯ä»¥èŠ±20åˆ†é’Ÿæ—¶é—´äº†è§£ä¸€ä¸‹ã€‚ [...]

Keith W

04.07.2009

Beautiful script, however you should mention you need to include: margin: 0; padding: 0; in the top ul#nav like so:

ul#nav { background: #91c6d5; float:left; list-style: none; width: 510px; margin: 0; padding: 0; } 

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…

Keith W

04.08.2009

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)

Trevor

04.08.2009

@Keith W-
You would change the line height of the anchors to be the same as the height.

For example:

ul#nav a {
 height: 38px;
 <strong>line-height: 38px;</strong>
} 

» 100 Popular jQuery Examples/Plugins

04.11.2009

[...] by the use of Javascript and all browsers will handle this technique even without JS enabled. 74. Consistent Base Font Size â€“ This is the best jQuery technique to gain control over your font sizes until IE finally support [...]

Waisbusiahark

04.16.2009

nice, really nice!

seo web development

04.29.2009

Interesting post. Thanks for sharing this techniques.

Matheus

05.25.2009

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

Trevor

05.25.2009

@Matheus-
Sure, as long as you can give credit to the original article with a link.

Matthew

05.28.2009

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.

15 Effective Tips and Tricks from the Masters of C

06.10.2009

[...] Trevor Davis: Set a Consistent Base Font Size [...]

15 Effective Tips and Tricks from the Masters of C

06.12.2009

[...] Trevor Davis: Set a Consistent Base Font Size [...]

15 Effective Tips and Tricks from the Masters of C

06.23.2009

[...] Trevor Davis: Set a Consistent Base Font Size [...]

mostafa

08.01.2009

Essential. thanks alot.

65 Must-Know CSS Strategies and Tutorials - Webite

08.11.2009

[...] The 6 Most Important CSS Techniques You Need To Know [...]

Ricardo

08.14.2009

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.

Trevor

08.14.2009

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

The Best CSS For Web Developer « Kooms

08.15.2009

[...] The 6 Most Important CSS Techniques You Need To Know [...]

Harry Fear

08.19.2009

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.

Trevor

08.19.2009

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

AMB Album » 15 Effective Tips and Tricks fro

08.23.2009

[...] Trevor Davis: Set a Consistent Base Font Size [...]

jono

08.23.2009

“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, .container is already at what your 1.2em style does. There’s no reason to use 62.5% this way.

sandrar

09.10.2009

Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

15 Effective Tips and Tricks from the Masters of C

09.23.2009

[...] Trevor Davis: Set a Consistent Base Font Size [...]

10 Principles of the CSS Masters @ duongnv's b

11.21.2009

[...] Trevor’s flagship article The 6 Most Important CSS Techniques You Need To Know, he’s added a nugget that can save many headaches when using columns in your layouts. I have [...]

ç¶²ç«™è£½ä½œå¸ç¿’èªŒ &raqu

11.24.2009

[...] The 6 Most Important CSS Techniques You Need To Know [...]

10 Ð¿Ñ€Ð¸Ð½Ñ†Ð¸Ð¿Ñ–Ð² CSS Ñ

12.02.2009

[...] ÑÑ‚Ð°Ñ‚Ñ‚Ñ– Ð¢Ñ€ÐµÐ²Ð¾Ñ€Ð° â€œThe 6 Most Important CSS Techniques You Need To Knowâ€, Ð²Ñ–Ð½ Ð´Ð¾Ð´Ð°Ð² Ð¿ÐµÑ€Ð»Ð¸Ð½Ñƒ, ÑÐºÐ° Ð¼Ð¾Ð¶Ðµ Ð·Ð±ÐµÑ€ÐµÐ³Ñ‚Ð¸ Ð²Ñ–Ð´ Ð³Ð¾Ð»Ð¾Ð²Ð½Ð¾Ð³Ð¾ [...]

Michelle

12.02.2009

@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!

izdelava spletnih strani

12.04.2009

I thought i was doing it right, obviously i wasn’t. Good tips, thanx

Sachin

12.24.2009

very useful…previously i was looking for the font size problem solution…you first example does that…many thanks….

Daily Digest for December 24th | Reading Muzaki

12.24.2009

[...] CSS techniques [...]

Eric Di Bari

01.11.2010

Great suggestions.

Long Island Web Design

01.20.2010

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

Longshot

02.04.2010

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?

Trevor

02.04.2010

@Longshot-
Huh? Do you have a link?

Longshot

02.04.2010

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

100 Popular jQuery Examples, Plugins and Tutorials

03.06.2010

[...] by the use of Javascript and all browsers will handle this technique even without JS enabled. 74. Consistent Base Font Size – This is the best jQuery technique to gain control over your font sizes until IE finally support [...]

yoomark

05.06.2010

really nice post.Keep it up…

markvgti

05.12.2010

I tried tip #1 in this article but it didn’t work for me. After banging my head against a wall for a while I posted a question to stackoverflow.com: http://stackoverflow.com/questions/2817531/how-is-font-size-not-working-here

Can you (or any readers) spot what I did wrong?

Thanks!

Student Brands

05.26.2010

Thanks for the important information, Im going to check my css now. Thanks again

jQuery Plugins - Nagpur City

06.02.2010

Nisha singh

06.18.2010

it proved useful for me, so i have bookmarked it

Nisha singh

06.18.2010

It proved very useful for me, so i have bookmarked it

Geek is a Lift-Style. » Best Of April 2008

06.21.2010

elof

06.23.2010

Unnecessary empty spans, poor clearing practice (empty div—lame).

Try again.
——-

The 6 Most Important CSS Techniques You Need To Know

1. Get a Consistent Base Font Size

2. Get Consistent Margins

3. Set a Float to Clear a Float

4. Image Replacement

The Markup

The CSS

5. Faux Columns

The Markup

The CSS

6. CSS Sprites

Example #1

The Markup

The CSS

Styles to IE6 and IE7

Styles to IE6 Only

Example #2

The Markup

The CSS

Styles to IE6 and IE7

Styles to IE6 Only

In Conclusion

Categories

Recent Articles

Share this article:

155 Comments

seo g

links for 2008-04-01 at James A. Arconati

Johannes Neumeier

Mark James

Andreas Blaschke

Nemesis Design

Matt Andrews

Trevor

Nemesis Design

Nemesis Design

Matt Andrews

Matt Radel

Trevor

Niall Doherty

David Worley

The 6 Most Important CSS You Need To Know | eKini:

Trevor

Ben Sekulowicz-Barclay

Fred Wu

Vincenzo

Coolness roundup #6: Grid-based & CSS flisterz

Frederik Van Zande

DavidM

Lee

kristaerella

nathan1

links for 2008-04-01 « toonz

Chris Carlson » links for 2008-03-31

links for 2008-04-01 | Funny Stuff is all around

links for 2008-04-02

Sebastian H

Entradas en las blogosferas.64 - Carrero BitÃ¡co

Great Resources Elsewhere: March 21 to March 28 -

TÃ©cnicas CSS — Tablosign

Fatih HayrioÄŸlu’nun not defteri » 0

×‘×œ×•×’×” ×©×œ ××ž× &ra

css de bilmeniz gereken 6 teknik - Volkan Åžent

Scot

Trevor

Sometimes its KEY to get the TOP tips! CSS in this

faaabulous » 6 techniques CSS qu’il fa

icaaq

Trevor

Valontuoja » Blog Archive » Kaoottinen

Top Stumbles - Best of StumbleUpon

Geoserv

NightAngel.fr » CSS : 50 Outils, 13 raisons,

Jesse

Trevor

SigT

SÃ©lection de liens web intÃ©ressants 28-04-08

6 tÃ©cnicas de CSS que debes conocer | Pere MAJO

pos

Jenny

×‘×œ×•×’×” ×©×œ ××ž× &ra