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 :)
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
Wow! Thanks for the tips!
Now to take over the world…
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.
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.
Great roundup of tips and tricks.
I never knew that last one, it’s seriously great.
Brilliant tips, very nice indeed. Also great use of my icons :) Keep it up!
very interesting tips list. Thank you
Simple, but quite effective tricks. Thanks yo for sharing these tips.
Btw, plz do check ur site in Mozilla. Cheers.
Thanks Great Tips i like the last one!
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.).
” 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.
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.
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
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!
* uups, your CMS “eated” my tags, please edi them if you can ;-) Thanks.
this is great for web design.
thanks
thanks for tips.
Excellent! thanks for posting…
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
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…
very helpful, thanks for sharing
awesome tips. thanks a lot.
I gave you the stumble thumbs up!
Thanks guys for the CSS tips. You can never get too many of them. And thanks for the IE workarounds too!
I couldn’t get the footer (#9) to work neither in FF3 nor IE7
:(
I am really enjoyed by reading this post. I remembered about css once again.
Thank you.
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
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;}
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!
Thanks for the great tips!
@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.
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]
@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 >.<
These are some really great tips you have here! The simple navigation set up is a popular one, great stuff here thanks for sharing!
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.
I love your title: “…to conquer the world!” Very cool!
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
Great CSS tips…I love the browser reset part. Thank you.
great article, stumbled gona help many peoples :D
Nice list - I especially liked the CSS table-less form layout, that’s going to come in really handy.
Thanks!
very good and useful tricks, though not used all yet but interesting ones.
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
All of them are great, but the tableless form is my favorite. Thank you for sharing!
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?
If only…
If only Pinky and the Brain had known CSS…
NICE
Thank you very much for CSS tips