The 6 Most Important CSS Techniques You Need To Know
Posted on March 30, 2008 in Tutorial | 97 Comments »
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?
Johannes NeumeierMarch 31, 2008 at 3:21 am
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 JamesMarch 31, 2008 at 6:48 am
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 BlaschkeMarch 31, 2008 at 7:13 am
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 DesignMarch 31, 2008 at 7:31 am
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 AndrewsMarch 31, 2008 at 7:47 am
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?
TrevorMarch 31, 2008 at 8:08 am
@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 DesignMarch 31, 2008 at 8:13 am
* { 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 DesignMarch 31, 2008 at 8:19 am
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 AndrewsMarch 31, 2008 at 8:40 am
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 RadelMarch 31, 2008 at 8:44 am
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!
TrevorMarch 31, 2008 at 8:49 am
@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.
Niall DohertyMarch 31, 2008 at 10:34 am
Nice tips.
Regarding #3 though, can’t you just add a CSS rule of overflow: auto to the container div?
David WorleyMarch 31, 2008 at 10:53 am
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: Web Developer BlogMarch 31, 2008 at 10:58 am
[…] Everyone should read this. […]
TrevorMarch 31, 2008 at 11:14 am
@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 image 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-BarclayMarch 31, 2008 at 12:19 pm
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 WuMarch 31, 2008 at 12:42 pm
Excellent technique Ben! Thanks! :)
VincenzoMarch 31, 2008 at 1:05 pm
Wonderful work, thanks a lot.. :-)
Coolness roundup #6: Grid-based & CSS flisterz:blogMarch 31, 2008 at 2:29 pm
[…] 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 ZandeMarch 31, 2008 at 4:41 pm
#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.
DavidMMarch 31, 2008 at 6:27 pm
@David Matt Cutts at Google indicated that CSS image replacement was OK from an SEO point of view - see seomoz.com
LeeMarch 31, 2008 at 6:49 pm
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
kristaerellaMarch 31, 2008 at 6:56 pm
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. :(
nathan1March 31, 2008 at 7:18 pm
More comments (and issues) over at Hacker News: http://news.ycombinator.com/item?id=150983
Chris Carlson » links for 2008-03-31March 31, 2008 at 7:46 pm
[…] 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 aroundMarch 31, 2008 at 8:41 pm
[…] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know (tags: CSS tips webdesign design tutorial Techniques tutorials) […]
seo gApril 1, 2008 at 2:09 am
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. ArconatiApril 1, 2008 at 2:34 am
[…] 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) […]
links for 2008-04-01 « toonzApril 1, 2008 at 7:35 pm
[…] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know (tags: css tips tutorial) […]
links for 2008-04-02April 1, 2008 at 8:55 pm
[…] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know 6 CSS pointers. (tags: css) […]
Sebastian HApril 1, 2008 at 10:25 pm
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ácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo.April 2, 2008 at 4:33 am
[…] 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 - CSSnewbieApril 4, 2008 at 3:01 am
[…] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know […]
Técnicas CSS — TablosignApril 4, 2008 at 10:13 am
[…] Davis nos explica las 6 técnicas CSS más importantes que deberíamos conocer. […]
Fatih Hayrioğlu’nun not defteri » 05 Nisan 2008 web’den seçme haberlerApril 5, 2008 at 10:16 am
[…] CSS’de bilmemiz gerek 6 teknik. Bağlantı […]
בלוגה של אמא » links for 2008-04-08April 7, 2008 at 11:42 pm
[…] 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ürkApril 8, 2008 at 5:37 am
[…] 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. […]
ScotApril 8, 2008 at 7:41 pm
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.
TrevorApril 8, 2008 at 9:07 pm
@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.Sometimes its KEY to get the TOP tips! CSS in this case « Amul’s Digital Life?April 11, 2008 at 8:15 pm
[…] clipped from trevordavis.net […]
faaabulous » 6 techniques CSS qu’il faut connaitreApril 15, 2008 at 5:17 am
[…] 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: […]
icaaqApril 17, 2008 at 4:04 pm
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.
TrevorApril 18, 2008 at 11:54 am
@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 linkkidumppiApril 19, 2008 at 4:40 pm
[…] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know […]
Top Stumbles - Best of StumbleUponApril 21, 2008 at 8:58 pm
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…
GeoservApril 21, 2008 at 8:59 pm
STUMBLED!
Thats a fantastic tutorial.
VOTED for this post here
NightAngel.fr » CSS : 50 Outils, 13 raisons, 6 techniques, la pagination, les variables et la calculatriceApril 22, 2008 at 11:09 am
[…] 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 […]
JesseApril 23, 2008 at 11:45 am
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
TrevorApril 23, 2008 at 11:56 am
@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.SigTApril 27, 2008 at 10:55 pm
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-08April 28, 2008 at 1:29 am
[…] 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 MAJORALApril 28, 2008 at 8:23 am
[…] 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“. […]
posApril 28, 2008 at 8:24 am
great article
JennyApril 28, 2008 at 11:06 pm
awesome tips. ;) I’ve just learned a few new things.
Best Of April 2008 | Best of the Month | Smashing MagazineApril 30, 2008 at 12:52 pm
[…] 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 - Best of the Web - AprilApril 30, 2008 at 10:42 pm
[…] Visit Tutorial […]
ijajajaMay 1, 2008 at 12:31 am
Faux Columns is something i have to take action now in my Site. Thanks for sharing..
des84 - Internet level 2 » Blog Archive » As 6 mais importantes tecnicas do CSS (ou quase)May 1, 2008 at 10:05 am
[…] The 6 Most Important CSS Techniques You Need To Know Posted by Pablo Davi Filed in […]
Kantongin » Best Of April 2008May 2, 2008 at 12:28 am
[…] 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. […]
BuzMay 2, 2008 at 4:44 am
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.
TrevorMay 2, 2008 at 9:03 am
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 designMay 5, 2008 at 4:41 am
The best way to clear float is with the clearfix technique.
Denver Web DesignMay 5, 2008 at 12:56 pm
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 Design BlogMay 7, 2008 at 5:50 am
[…] 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 HeimlichMay 7, 2008 at 10:59 am
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….
TrevorMay 7, 2008 at 12:32 pm
@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 MarketingMay 7, 2008 at 1:02 pm
Great Tutorial
I agree IE 6 & IE 7 suck.
Nice Reset Too.
Thanks
Pablo Esquivel
Best Of April 2008 - Glimpses of the AlephMay 9, 2008 at 5:07 pm
[…] 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. […]
Web DesignMay 10, 2008 at 4:21 pm
fantastic article! Will really start to beef up my css..
Varios links para desarroladores web » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar.May 10, 2008 at 7:51 pm
[…] The 6 Most Important CSS Techniques You Need To Know […]
MaximeMay 14, 2008 at 9:59 am
The essential is here. In my del.icio.us bookmarks :)
Web Design GlasgowMay 16, 2008 at 5:59 am
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)
compwriteMay 16, 2008 at 5:40 pm
nice work, i appreciate
ArunMay 28, 2008 at 3:32 am
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 designerMay 30, 2008 at 8:23 pm
Great stuff! i will be experimenting with these tips. Well done Trev
Boogaloo ManJune 5, 2008 at 5:47 pm
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
TrevorJune 5, 2008 at 8:06 pm
@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 ManJune 5, 2008 at 9:37 pm
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 » 6 técnicas básicas para tu CSSJune 11, 2008 at 7:31 am
[…] » Explicación extendida en inglés […]
JankoJune 17, 2008 at 3:06 pm
Excellent article, Trevor!
DRossAugust 24, 2008 at 12:14 am
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 - NETTUTSAugust 25, 2008 at 10:49 pm
[…] 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 WeblogAugust 26, 2008 at 2:06 pm
[…] http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/ […]
Blah! » Blog Archive » Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To KnowAugust 26, 2008 at 4:54 pm
[…] Trevor Davis | Blog | The 6 Most Important CSS Techniques You Need To Know insert a clearing element […]
crawlspace|media » Blog Archive » Daily Ma.gnolia Links for August 26August 27, 2008 at 2:59 am
[…] 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: […]
10 Principles of the CSS Masters « Tony’s ThoughtsAugust 27, 2008 at 10:59 am
[…] 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 DamascoAugust 27, 2008 at 5:41 pm
Nice article, thanks
Kadir GÜNAY | amatör ruhlu platform » » Derlemeler - 29.08.2008August 29, 2008 at 3:19 am
[…] Bilinmesi gereken 6 CSS tekniği - Trevor Davis [siteye git] […]
PetroniAugust 29, 2008 at 10:29 am
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?
TrevorAugust 29, 2008 at 10:40 am
@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.comSeptember 17, 2008 at 3:20 pm
Awesome article I’m going to share it with all my coders..
Thanks Again!!!
The 6 Most Important CSS Techniques You Need To Know [Trevor Davis]September 18, 2008 at 10:43 am
[…] Source: Trevor Davis; Date: 2008 / 30 […]
mortredOctober 9, 2008 at 3:30 am
* { 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..
kristarellaOctober 9, 2008 at 4:35 am
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? :October 19, 2008 at 12:57 pm
[…] The 6 Most Important CSS Techniques You Need to Know […]
Devigner » Blog Archive » [译]CSS大师的十条法则October 28, 2008 at 10:07 pm
[…] 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 » [译]CSS大师的十条法则November 3, 2008 at 8:46 pm
[…] (出自trevor08年3月的文章http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/ ) […]