10 Useful CSS tricks to conquer the world!
Well, that might be a slight exaggeration, but these CSS tricks are sure to help improve your toolset!
We wanted to drop this article as we use these CSS gems on almost every site we design, yet once upon a time never knew they existed. We’ve also ordered the list so each tip should follow the last in terms of practive & usability.
Hopefully they will give you some new experimentation for your next designs :)
1. Reset browser defaults then reset the browser font size
We start with the first lines of CSS any design should use! We know we’ve mentioned the reset before, but it’s a priceless tool. The first part of this is to use the Yahoo UI Reset CSS Package. This resets browser inconsistencies, giving you a fresh & clean foundation to build upon. If you don’t want to download the 9mb file, the code is below:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
Secondly, we like to reset the browser font size to 10 pixels, by using the following line:
html {font-size: 62.5%;}
This is a good font size to work with, as you can then use em units. For example, paragraphs at 12 pixels and header 1 at 20 pixels? Then write…
p {font-size: 1.2em;}
h1 {font-size: 2em;}
2. Design centered horizontally (fixed width)
Most websites at current are fixed width. Its debatable whether liquid or fixed is the way to go, but usually your client’s audience & market dictate this. To center your layout, apply this CSS code to the wrapper/container div of your page:
div#container {margin: 0 auto;}
3. Controlling position:absolute, relatively
Setting elements with position:absolute allows for complete control over its positioning through a distance of either top, left, right or bottom. This distance is calculated from the page boundary (body), unless we nest it inside an element set to position:relative
This may sound confusing, so look at the example below:
If we did not set position:relative to the outside div, then the nested div’s position would instead be relative to the next element up until it finds one, such as the page boundary. You can use this to help with complex layouts.
4. Position an element center screen
If you’d like to position something perfectly center on screen, then use the CSS below
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
You must specify the width and height of your div explicitly, and then give it negative margins half of dimensions for top and left, which brings the div back center screen.
5. Global rules that can be re-used
.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}
Setting yourself a few CSS selectors at the opening of your stylesheet can aid your development. Whenever they are required you can simply add the tag depending on your choice.
Our example shows the use of this with images within a blog post, the result of which is here to the right!
6. IE6 double margin on floated elements
A common problem found when working on a design, reasons behind which we’re not even going in to! But it is there alongside all the other lovely ways IE6 likes to feel individual. To correct this problem use display:inline.
div {float:left;margin:40px;display:inline;}
7. Simple navigation bar
It’s always useful to have a default navigation bar to paste into your designs. The CSS here turns a standard unordered list into a horizontal bar of lovely links! First comes the XHTML:
<div id=”navbar”>
<ul>
<li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>
<li><a href=”http://www.google.com”">Google</a></li>
<li><a href=”http://zenhabits.net/”>Zen Habits</a></li>
</ul>
</div>
Followed by the CSS:
#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}
8. Table-less contact form
As we now proceed with building websites table-free, focusing on using DIVs instead (until CSS3 it seems), it’s great to be able to style forms also in the same manner. No longer are tables needed to hold columns and fields in order, all we need is some neat CSS. Found over at JeddHowden.com, we float each form input’s label next to the input box.
XHTML:
<form action=”form.php” method=”post”>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”first_name”>First Name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
</div>
<div>
<label for=”last_name”>Last Name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
</div>
<div>
<label for=”postal”>Zip/Postal Code:</label>
<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
</div>
</fieldset>
</form>
CSS:
form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}
9. Footer hooked to browser bottom
This is an old gem, and all credit goes to The Man in Blue. This CSS hook allows you to ensure your footer stays at the bottom of the browser window. Here is the XHTML:
<body>
<div id=”nonFooter”>
<div id=”content”> *Place all page content here* </div>
</div>
<div id=”footer”> *Place anything you want in your footer here*
</div>
</body>
Followed by the CSS:
html, body { height: 100%; }
#nonFooter { position: relative; min-height: 100%; }
* html #nonFooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }
10. Multiple classes applied to one element
This is not so much useful code, as more of a useful feature most people overlook within CSS selectors. Any element you apply classes to, can have as many classes as you like. For example:
.red {color: red;}
.bold {font-weight: strong;}
We can apply both of these to a paragraph if wanted, by doing the following:
<p class=”red bold”>This text will be red yet also bold!</p>
Hopefully we may have enlightened some readers and given you some ways to use useful CSS in real websites. Sorry that this is the only article we’ve written this week, but our work flow has been quite hectic! Enjoy your weekends and we will have some new content for you Monday :)
John Sparrow
August 8th 2008
Nice, thank you! As a relative newcomer to freelance web design, these are some of the things I found were lightbulb moments when I was finding my feet. Still some cool advice up there!
Two things, one a question: with the reset font code, and subsequent em use, is there a danger of inheritance making text incorrectly sized? I recall having this problem once, though it was probably just bad coding on my part.
The other thing is the margin auto, which IE6 doesn’t support. I saw a great workaround which is simply to add a text-align: center; attribute to the body tag, and then reset this to left or justify in the wrapper element. Makes no difference to the browsers that display the auto margins correctly, but brings IE6 into line!
Thanks for the tips
John
frank
August 8th 2008
Wow! Thanks for the tips!
Now to take over the world…
K.K.Shankar
August 9th 2008
Thanks for the tips.
Can u list the common mistakes in CSS. now we are working as a team and accessing the single CSS file.
David Pahl
August 9th 2008
Tip number 10
class=”red” ? This goes against markup vs. style. Maybe the class is a warning or title. If one wants to change the color to green. Then the class would be red but the color would be green. Or one would have to change it in two spots…
But I am all for multiple classes.
Charles Forster
August 9th 2008
Great roundup of tips and tricks.
I never knew that last one, it’s seriously great.
liam
August 9th 2008
Brilliant tips, very nice indeed. Also great use of my icons :) Keep it up!
Stefano
August 9th 2008
very interesting tips list. Thank you
Rahul
August 9th 2008
Simple, but quite effective tricks. Thanks yo for sharing these tips.
Btw, plz do check ur site in Mozilla. Cheers.
Manuel
August 9th 2008
Thanks Great Tips i like the last one!
Brian Hysell
August 9th 2008
Please reconsider #5. That tip goes against one of the core principles of CSS, the separation of presentation from content and structure. That separation is among CSS’s most profound advantages over the various deprecated stylistic elements (e.g. , , etc.).
Andy Bateman
August 9th 2008
” 5. Global rules that can be re-used
.left {float: left;} ”
Common mistakes? naming classes after their position/colour.
What about when you restyle your site and want a left floated stuff on the right. Styling should always be separated from markup.
Blogician
August 10th 2008
David is right. Having a selector named “red” is bad form. Selectors should be named after the content they apply to, not the way that content happens to be presented. The same goes for “.right” and “.left” in #5.
Andy Ford
August 10th 2008
RE: #5 - the selectors “img .left” and “img .right”
Should be “img.left” and “img.right” without spaces. Otherwise you’re targeting all elements with a class of “left” (or “right”) that occur within an IMG element - this could never happen as an IMG element cannot contain other elements
Erik Gyepes
August 10th 2008
Good tips, however I think that in number 7 the wrapping is redundant. The id could be added to the tag and it should have the same final effect, but with simpler code.
Anyway great tips!
Erik Gyepes
August 10th 2008
* uups, your CMS “eated” my tags, please edi them if you can ;-) Thanks.
adelaide web design
August 10th 2008
this is great for web design.
thanks
paresh
August 10th 2008
thanks for tips.
Maheskrishnan
August 10th 2008
Excellent! thanks for posting…
Mario
August 10th 2008
Footer thingy (#9) doesn’t work in Opera…
@sparrow: I don’t know what are you talking about, margin auto works normally in IE6, I center my elements with it all the time
kai
August 10th 2008
K.K. Shankar said “Can you list the common mistakes in CSS.”
One common mistake is to name id’s and classes based on the style instead of their function.
So, for example, you would never want to call a class .red just because it has the attribute “color: red;” and you would never want to call a class .bold just because it has the attribute “font-weight: 600;” or “font-weight: bold;”.
Instead you would call .red something like .important because you are probably coloring the text red because it’s something important. This way, as David pointed out, the important text can be changed to other colors as the design may change and the class name will still make sense.
Instead of naming a class .bold you might use the html tag so that screen readers can also know that the text has emphasis.
Also, for tip 7, you can give the the id instead of wrapping it in a . Just a way to simplify.
Awesome guide though…these sure are CSS gems…
acms
August 10th 2008
very helpful, thanks for sharing
Durkin
August 10th 2008
awesome tips. thanks a lot.
I gave you the stumble thumbs up!
HowTheMarketWorks.com
August 11th 2008
Thanks guys for the CSS tips. You can never get too many of them. And thanks for the IE workarounds too!
Nik
August 11th 2008
I couldn’t get the footer (#9) to work neither in FF3 nor IE7
:(
Brown
August 11th 2008
I am really enjoyed by reading this post. I remembered about css once again.
Thank you.
Nathan Beck
August 11th 2008
Extremely useful article. The hooked footer and center-screen positioning are 2 techniques that I’ve hunted down for ages and never worked out how to do. I’ve had to completely redesign sites because I’ve not figured out how to create my original designs.
Some of the other bits seem obvious but if you don’t already know it then they’re really useful. I only learned about multiple classes on one element about 2 weeks ago, and it would have saved me so much time in the past where I’ve created numerous id’s to change the slightest attributes. It really goes to show just how powerful CSS can be when you know what you’re doing with it.
Thank you very much, this page is duly bookmarked!
Nathan Beck
http://www.redswish.co.uk
graham
August 11th 2008
interesting tips. I agree that classes shouldn’t be defined by their action, it makes it trickier to make changes as you’ll have to alter the html. It would be better to either use the selector for each id/class or try #content, #footer, #navigation {float: left;}
Ashley Sheridan
August 11th 2008
I’d reconsider point #4, as this fails pretty abysmally when the browser window is smaller than the dimensions of the box you are centering. Screen size is not the same as browser size, and a user may be using a reduced size browser window on a huge screen, and forcing them to maximise their browser window kinda goes against what CSS is meant to be about!
On another note, I was interested to see how the CSS Reset script hosted on the Yahoo Develop site was less than a bit. I think maybe you meant 9MB, as 9mb equates to 0.009 or 0.000009 bits (depending on whether you mean micro or milli) And trying to split the bit could result in some weird Internet nuclear winter!
Nout
August 11th 2008
Thanks for the great tips!
Clay McIlrath
August 11th 2008
@John Sparrow: The element you’re trying to center has to have a defined/fixed width. Maybe that’s you’re problem.
Some of these tips tricks seems useful others not so not.
#1. I particularly like the em conversion, i’ve been using 16px as default but 10 is a lot easier to convert in your head! :)
#5. I could see an arguement made for bothn sides. I use a class called “fleft” and “fright” (that way they’re not confused with align and they’re easy to find/replace). But i do so because i often make sites that are handed over with a CMS to a client and then not touched by me again. So creating structure elements that can be added/removed easily and in a broader sense is important since the client can create a page from scratch, ignoring my entire structure and template and usually wants to be able to position images and text and such. But outside of a client managed site, i agree with the other comments, style/layout should be separated from markup.
TheApocalypse
August 11th 2008
Good article in general, but replacing table elements with a bunch of divs is not really any better. I am pretty sure this does the same thing, no div needed…
label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right; clear:left;}
input {float:left; display:block;}
[form action=”form.php” method=”post”]
[fieldset]
[legend]Personal Information[/legend]
[label for=”first_name”]First Name:[/label][input type="text" name="first_name" id="first_name"” size="10"″ value="First Name" /][br/]
[label for=”last_name”]Last Name:[/label][input type="text" name="last_name" id="last_name" size="10" value="Last Name" /][br/]
[label for=”postal”]Zip/Postal Code:[/label][input type="text" name="postal" id="postal" size="10" value="Postal" /][br/]
[/fieldset]
Derek Kaye
August 12th 2008
@Ashley Sheridan, ‘µ’ is usually used to represent micro, not ‘m’.
Great tips… it’s amazing how much you know but conveniently forget when building your own sites >.<
Affordable Web Design
August 12th 2008
These are some really great tips you have here! The simple navigation set up is a popular one, great stuff here thanks for sharing!
Lalit Choudhary
August 12th 2008
Really a Basics interesting tips.Agree that classes shouldn’t be defined by their action, it makes it trickier to make changes as you’ll have to alter the html.
Benny Buttons
August 15th 2008
I love your title: “…to conquer the world!” Very cool!
John Sparrow
August 15th 2008
Hmm, yes, looks like the margin auto things is only an issue PRIOR to IE6. That’s a ‘bug’ I’ve been fixing unnecessarily then… apologeez.
J
JONxBLAZE
August 22nd 2008
Great CSS tips…I love the browser reset part. Thank you.
MOin
August 22nd 2008
great article, stumbled gona help many peoples :D
Katy
August 27th 2008
Nice list - I especially liked the CSS table-less form layout, that’s going to come in really handy.
Thanks!
ibee hosting
August 27th 2008
very good and useful tricks, though not used all yet but interesting ones.
carlo
August 29th 2008
I tried trick #7 in IE7 (OK), Firefox 3.0.1 (does not work), Safari 3.1.2 (Windows) (does not work)
Trick #9 is great
Thanks
Carlo
Lalo Marquez
August 30th 2008
All of them are great, but the tableless form is my favorite. Thank you for sharing!
gary
August 31st 2008
what if i want to reset my font size to 11 pixels? do i set the font-size to 75%? what about 12 pixels? how exactly do i go about determining the measurements?
SD
September 5th 2008
If only…
If only Pinky and the Brain had known CSS…
chirag
September 5th 2008
NICE
Thank you very much for CSS tips
Poonam
September 22nd 2008
Nice tutorial. Thanx :).
gWallet
October 14th 2008
Whoa…nice. I had a handle on most of these, but #9 is going to come in mighty handy. Thanks!
jackob bangiel
October 22nd 2008
WOW! very useful hints. Thans for add.
S.Ali Qamar
October 24th 2008
Very useful tips on CSS. Some time I really wonder how to satisfy so many browsers out there at the same time? Will the CSS3 be able to handle it in a way that web people are less overloaded then?
Shannon
October 25th 2008
Very nice. The resetting of the browser is great advice. Thanks!
Web Buckets
November 5th 2008
Hmmmmm, what can i say… as I’ve read the post… i feel I can conquer all those flirting browsers.. hehehe cool post… keep posting please..
venkat
November 5th 2008
Really useful to me…………….Thanks
DMC
November 13th 2008
Yeh, #5 isn’t good at all.
It goes against style/ content separation.
You should really take it out.
The implementation in #10, similarly. Multiple classes are great, but you shouldn’t be implying that mixing style and content is ok. It isn’t.
#9 is excessive. This could be done by applying absolute positioning - bottom to the footer alone.
Jakub
December 6th 2008
question:
in second code:
html {font-size: 62.5%;}
Why do you don’t use straight 10px font-size instead of 62.5% ? Isn’t it better? So EVERY browser will know exactly how big should defaulf font be?
Web Tuts
February 3rd 2009
On your last point regarding multiple classes, would setting the bold attribute within the CSS not take away the benefits within Google for SEO purposes. I would have thought around the text would be a lot more beneficial than “font-weight: strong” within the CSS.
Rik Weber
February 3rd 2009
some really helpful tips there, thanks!
Dianette
February 12th 2009
Excellent… I was not sure if I could find it so easily and together today but you have made my day. Thanx a lot once again mate.
Scarf*oo
March 5th 2009
Not sure this will help me with my world dominance plans, but it’s a useful post anyway ;)