CSS Tips I Wish I Knew When I First Started
I’ve been working with CSS for quite a while now, and even though it’s relatively easy to learn, there are always new tips and tricks to be found. I’m learning new stuff all the time. I wanted to take a moment to put together this helpful list of CSS tips I wish I knew when I first started. Although many of these tips are common knowledge, I think you’ll find them helpful. At the very least I hope you’ll be nodding your head in agreement.
Use Overflow: Hidden; to Clear Floats
It wasn’t until recently that my style sheets were littered with unnecessary clearing floats that looked like the following.
1 2 3 4 5 6 | .clear { clear: both; } <div id="columns"> <div id="column1"></div> <div id="column2"></div> <div class="clear"></div> </div> |
These clearing floats will work perfectly fine, but they are unnecessary. Instead you can just use overflow: hidden; on the parent div to clear the children elements, like in the following example.
1 2 3 4 5 | #columns { overflow: hidden; } <div id="columns"> <div id="column1"></div> <div id="column2"></div> </div> |
Group Elements Together
One of the mantras of good coding 101 is to keep your code as simple and concise as possible. This helps its readability and performance. If you have a couple of elements that are doing the same thing, it’s wise to string them together. So instead of…
1 2 | h1 { color: #333; font-weight: bold; } h2 { color: #333; font-weight: bold; } |
You can group these elements like so…
1 | h1, h2 { color: #333; font-weight: bold; } |
Comments Are Important
Many of the sites that I create are 1-man projects. The last thing I want to do when I get into the flow of coding a design is to stop my progress to add some comments. However, when I go back to that code a year later I often have no idea what I was trying to accomplish. By adding logical comments throughout I can give myself very readable reminders about my code. And if, someone else gets the pleasure of looking through it they’ll have a better chance of understanding what I was trying to do.
Add Some Base Styles to the Body
This goes back to the code-less principle I discussed earlier. I like to get a nice base of font styles setup right on the body tag rather than redefining font-styles for every element. Here is an example of what I mean…
1 2 3 | body { color: #555; font: normal .8em/1.5em helvetica, arial, sans-serif; } <!-- Then I can just set weight, and size by percentage --> h2 { font-size: 150%; font-weight: bold; } |
Use Some Kind of CSS Reset
One of the first difficult lessons that CSS noobs run into is the differences between browsers, especially when it comes to padding and margin styles. The best way to combat these inconsistencies is to start with some kind of CSS reset. There are a ton out there. Perhaps the most popular and the one I start with the most is Eric Meyer’s CSS Reset. Sometimes I just put together my own. At the very least you should use a simple global reset like this…
1 | * { margin: 0; padding: 0; } |
Use CSS Shorthand
This is me preaching about writing as little code as possible again! Why write this much code?
1 2 3 4 5 | p { font-family: verdana, helvetica, sans-serif; font-size: .8em; line-height: 1.5em; margin-bottom: 10px; margin-top: 10px; } |
When you can shorten it to this
1 | p { font: normal .8em/1.5em verdana, helvetica, sans-serif; margin: 10px 0; } |
IE Sucks
This well know fact has been covered more than enough, but I must admit that when I first started I wasn’t sure what all the fuss was about. After spending hours trying to make things look ‘ok’ in IE, you quickly come to realize just how much you loathe this piece. The best advice I can give on this subject is to fight through it, eventually you can tame the beast. Use hacks as little as possible, and in really tough situations target IE specific styles with a conditional statement like this.
1 2 3 | <!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> |
Take Advantage of Progressive Enhancements
Just because IE sucks doesn’t mean you can’t use technologies like CSS 3 and HTML 5 to add progressive enhancements to your site. So go ahead and add rounded corners in CSS, and box shadows (in moderation please!). And if you really want to get things looking pretty similar in IE here are 10 Ways to Make Internet Explorer Act Like a Modern Browser. Even so, it’s good to keep in mind that your site doesn’t need to look identical (not that it ever will) across every browser.
Writing Clean Code Makes Me Sleep Better
This tip goes along the same lines as commenting throughout your code. Writing cleaner code helps with readability for yourself, and for those poor folks who may have to read your code down the road. How exactly to clean up your code however, can get a little nit picky. There is plenty of debate about which way is best, for instance should you use hyphens, underscores or camelCase, others debate over whether to alphabetize or prioritize your properties, still others wrestle over whether to put css on one line or multiple lines. For the record, I use hyphens, alphabetize, and single line, and that’s definitely the right way to do it :)
Till I Learn Some New Stuff
That’s it for now, but like I said I’m always learning new things. What sort of tips have you learned that you’d like to share. And feel free to add to the debate about what is the best way to write clean code (I’m sure the opinions are limitless).
If this post was helpful to you, please consider sharing it with others, it's a great way of saying thanks.
CONTRIBUTE
Marcell Purham
April 19, 2010
Great post! When I first started using CSS IE and floats took the longest to understand. Great tips
Andrew Houle
April 20, 2010
Thanks Marcell! Agreed, floats take a while, but they are definitely worth the time.
Tony
April 19, 2010
CSS Resets are still a mystery to me. SMH.
Kevin
April 20, 2010
I tend to use “overflow: auto;” over your float-clearing solution. Semantically, it seems to make more sense.
Andrew Houle
April 20, 2010
Good point. I should actually switch to that, it makes more sense.
cooljaz124
April 20, 2010
Sometime you get a lot of scrollbars in other browsers, even in firefox when you use overflow:auto. overflow hidden seems work perfectly.
Andrew Houle
April 20, 2010
Yeah I just tried that on a site and ran into that same issue. I guess I’ll stick to overflow: hidden as long as that’s working.
Mariusz
April 20, 2010
Using overflow:hidden to clear floats has its drawbacks. I strongly recommend the clearfix method instead – http://www.positioniseverything.net/easyclearing.html
biophonc
April 20, 2010
true dat. plus it needs less markup and works perfect.
Andrew Houle
April 20, 2010
How is this less markup?
cooljaz124
April 20, 2010
What are the drawback in using overflow:hidden ??? Let me know.
biophonc
May 17, 2010
@cooljaz124: the drawback of “overflow:hidden” means: elements / content may gets not displayed, because the generated dimensions of the element may is bigger/taller than the parent. I’d only apply overflow:hidden when really needed, for instance when creating sliders/carousels.
@Andrew Houle: Less markup isn’t always true – so i have to correct my statement to: It *may* needs less markup. By using the clearfix method, you could use the wrapping div also as parent for your css declarations:
.parent .leftChild {}
.parent .rightChild {}
This is sometimes very useful to override your default css declarations and keeps the code more legible. And: if you have your columns cleared by your method, I bet you often wrap it anyway with a div and that’s the situation where you could write less code – because with the clearfix method, you don’t need an appending div with clear:float – only the clearfix wrapper.
b*
Federica Sibella
April 20, 2010
Hi, interesting reading thank you.
For clearing floats I use a br with this styling
br {clear: both; width: 100%}
and it works well for me.
I also recommend using some CSSreset for clearing browsers default and having complete control of your styling. Thanks again.
Lam Nguyen
April 20, 2010
Nice! The CSS shorthand is the most common skill every web designer should know!
Jamy
April 20, 2010
People shouldn’t readily use:
<!–[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]–>
since it will also affect IE 9. In general it would be better to use <!–[if lte IE 8]>
Andrew Houle
April 20, 2010
Nice addition. I usually target a specific IE, or use the less than syntax, but I was showing an overview. However you are right, you usually should be more specific, and here’s to hoping you won’t need to target IE9 at all, but I doubt that.
Hannes
April 20, 2010
AMEN @ Use Overflow: Hidden; to Clear Floats …
I only use the clearfix method if the overfow method fails in some browser.
but maybe say something about css minify?
Andrew Houle
April 20, 2010
Certainly that would be a worthy addition :)
Liam O'Leary
April 20, 2010
Yeah good article. Floats, padding and margins can be tricky, event more so when trying to make your website look the same in older versions on IE, lot’s of bug fixes for 5 and 6.
Another issue with starting CSS is to make sure you get the right DOC TYPE for your HTML / XHTML pages as these can make a huge difference in the way the pay is displayed!
Andrew Houle
April 20, 2010
DOC TYPE is a nice addition. I’m loving how simple it is for HTML 5. It should always be as easy as: < !DOCTYPE html> :)
Mark
April 20, 2010
Great article. I always tend to forget to group similar items together for some reason
Anja
April 20, 2010
thanks for this article – made me smile since i recognised my own mistakes… great compilation, though!
Damian Smith
April 20, 2010
Nice article.
I noticed people talking about floats here and Ive been in a few “heated” discussions recently about whether using floats is the correct way to layout a site. I personally have always used floats, ie, I will have a container div with:
margin:0 auto;
width:1000px;
height:auto;
overflow:hidden;
then set divs within this with float left or right etc.
But a fair amount of people are arguing that absolute positioning should be used not floats. I think I will stick to floats until I come across some kind of major problem with them!
as for the shorthand, thanks for the (font: .8em/1.2em) for the line height, never knew could do line height like that!
Andrew Houle
April 20, 2010
Yeah it’s definitely interesting how much talk floats and clearing bring up.
Glad to hear I could add a new trick to your arsenal :)
cooljaz124
April 20, 2010
Alphabetizing CSS is another good thing to mention.
Dave Kingsnorth
June 29, 2010
I personally don’t like alphatetizing. I much prefer to group selectors together according to their relationship with each other.
/* Global Styles */
/* Typography */
/* Forms */
etc
Jeremy
April 20, 2010
Great article.
I’ve been a css-nut for a little over a year – and I never knew you could clear floats with ‘overflow: hidden’! Never too good to learn, that’s for sure.
Also read the comment about using ‘overflow: auto’ … will definitely give this a try. Thanks for the article – very good advice and great reminders as well.
Andrew Houle
April 20, 2010
Glad you found the writeup useful! I think I’ll be sticking to overflow: hidden for now.
TheAL
April 20, 2010
Heck, I wish back when I started in the mid-late 90′s I had used what little CSS existed at all. Silly me, I blew it off as some fad and ignored it well into maybe 2003 or so. I just kept using in-tag attributes, things like the font tag, and tables. *lol*
K2Joom
April 20, 2010
Nice little guide, bookmarked and shared. Thanks
RSA Online
April 20, 2010
Thanks! I hadn’t thought of looking for a ‘comprehensive’ CSS reset, what a great idea!
Also I didn’t think overflow hidden would work like that.. and I’m still a bit skeptical.. I suppose it depends what styles you have applied to your inner divs,. the way I would do it, I am sure it doesn’t work.. I only use overflow hidden when I want to ensure nothing will escape outside of a box, or doing a look through a window type of effect.
go4webapps
April 21, 2010
very useful post on css.. thanks
webbie
April 21, 2010
It may be worth noting the CSS shorthand for margins and paddings where
#div {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
/
#div {
margin: 20px 20px 20px 20px;
}
=
#div {
margin: 20px;
}
Or
For different (top/bottom) (left/right) margins or paddings
#div {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
}
/
#div {
margin: 20px 10px 20px 10px;
}
=
#div {
margin: 20px 10px;
}
Or
For the same left/right margins or paddings with different top/bottom.
#div {
margin-top: 20px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
/
#div {
margin: 20px 10px 10px 10px;
}
=
#div {
margin: 20px 10px 10px;
}
Kate Fosson
April 21, 2010
Thanks for the tips!
I never really thought to use comments on my own code, but you make a good point. I can definitely see where this would help me, or others, out in the future!
Yorkshire Web Design
April 21, 2010
Interesting article, very informative! Thanks Ted.
sebastian green
April 21, 2010
Got to be honest, posts of this subject and style are popping up all over the place at the moment, just this week I have read about ten.
However , I have to say that this is the best one I have read :)
Gbuster
April 21, 2010
IE does suck. A lot. A lot more than you even know.
But so does digging through multiple stylesheets to figure out where the hell someone put their hack that I have to change/fix/delete. First, you have to identify that a hack is in place to fix IE, generally not an easy task. Next you have to dig through the file system to find the file, then dig through the code to find the hack or hacks.
This is the reason I will always use hacks to target browsers. That way your hacks are right with your “proper” code, no searching needs to be done.
For instance if you have margin issues on an element that only needs to be fixed in ie6:
.das_boot {
margin: 30px;
}
* html .das_boot {
margin: 15px;
}
I leave hints for myself such as not putting an extra l;ine between the two rules.
This is at the top of all of my stylesheets:
IE6:
* html #ie6 { background-color: red; }
IE7:
*:first-child+html #ie7 { background-color: blue; }
Safari2:
body:last-child:not(:root:root) #safari2 { background-color: yellow; }
“Modern” browsers:
html>body #modern { background-color: pink; }
Safari 3:
html*:first-of-type #safari3 { background-color: orange; }
html*#id_of_body:first-of-type to target the body
Safari 2/3:
html* #safari2and3 { background-color: gray; }
html*#id_of_body to target the body
I’ve only added them as I have needed them.
Deluxe Blog Tips
April 21, 2010
Nice post. When I started in web development, my code was a mess :D. These things took me a long time to get understand. Thanks for sharing this experience, it’s really helpful for beginners.
Digital Art Empire
April 22, 2010
nice read Andrew
- informative and well written – css shorthand seems very useful still getting my head round all these techniques
cheers
Sara
April 22, 2010
Thank you very much! I just started working on an own template for a charity site to be unique and your article is perfectly good timing. You answered some questions I had especially about working with the IE. I’m used to work with Firefox and I check the site every now and then with other browsers and IE doesn’t show me what I’d like to see. So I will try out what you have written.
Unfortunately I have nothing new to share with you… Well… Thanks anyway.
Cheers =)
_meganORSI__
April 22, 2010
Great article! I’ve been using CSS just about every day now for about 3 years! I’ve become almost ADDICTED to learning new techniques!
When it comes to clearing, I’ve been trying to use the overflow: auto where applicable, to avoid extra HTML markup. However, this technique can produce a scrollbar. If that happens, then floating the parent div will ALSO do the trick. Unfortunately, if your design is centered (as mine often are), then you need to create a containing div, which ultimately adds additional mark-up anyway!
My office (unfortunately) still supports IE6, so all of my sites have to be IE6 compatible. I’ve come quite accustom to creating CSS that works cross browser w/o the need for a separate style sheet.
The clearfix method would be great except that IE6 doesn’t support pseudo classes, so it doesn’t work. :-(
I can’t offer any NEW css tips, but I CAN offer a link to a tool that’s been very helpful: IETester. (http://my-debugbar.com/wiki/IETester/HomePage) Absolutely the best I’ve found. It even works on local sites!
Thanks again for the great article. I always enjoy reading about everyone’s different CSS tips and tricks :-)
Tsz Ming Wong
April 23, 2010
It is preferred to add “zoom:1″ in #columns, so as to trigger the “hasLayout” properties in IE6 to make it render as expected.
see: http://www.quirksmode.org/css/clearing.html
Ivan
April 23, 2010
Nice tips, verry usefull
injected
April 24, 2010
nice tutorial!!
David Coe
April 25, 2010
Great post… I certainly wish I’d seen this when I first started.
As Kevin said above,I’d strongly recommend using “overflow: auto;” and opposed to “overflow: hidden” when clearing elements… This way overflowing content doesn’t disappear off the page.
Secondly I would strongly recommend using a CSS reset such as ‘Eric Meyers CSS Reset Reloaded’. This ensure all the browsers start with the same values.
Lastly I advocate the use of using borders on elements that are misbehaving. This enables you to quickly debug problems in your code that you may not have been aware of. I.E “div.mycontainer * {border: 1px solid red;”
Great tutorial!
cooljaz124
April 25, 2010
Yes, giving borders alwasy help !! But, im not sure why you oppose overflow:hidden ?? overflow:auto gives undesirable scrollbars , but the main thing is , why we are giving heights for a div where we give overflow property ?? height should be auto. Most of conversions are done for CMS, so we cant set the height !
Stephen Bates
May 16, 2010
“Lastly I advocate the use of using borders on elements that are misbehaving. This enables you to quickly debug problems in your code that you may not have been aware of. I.E “div.mycontainer * {border: 1px solid red;”
Or you could just use Firebug….
SSH Commands
March 28, 2011
Firebug is great… but doesn’t work on Internet Explorer 6. This is where adding border’s really helps.
Sherry
April 26, 2010
Just want to learn CSS , but it is a little difficult to me, thanks for your tips.
Greg Althoff
April 27, 2010
thanks for this – I’ll def. be taking these into consideration when re-applying myself in the coming months with CSS.
Dzinepress
April 29, 2010
really useful CSS tips. thanks
Shane Jeffers
May 4, 2010
These are some simple effective ideas. Great job Andrew!
Nicholas Tuck
May 5, 2010
Nice short post. Thought this was going to be a 20 tips thing. Can’t believe you encouraged a specific coding style. And the wrong one at that. Camel case all the way!
Mike
May 6, 2010
Great Post, nice piece of code which do the trick and sometimes we face this overflow issue and end up with layers
rjbrill
May 10, 2010
Great tips, the float tip is especially useful along with css reset. One thing I always do when building is test, test, test in as many different browsers as possible. I know it can get cubersome, but when you only use Firefox for the whole site then test IE every so often you’ll find you’ve changed some CSS code and IE has gone awry but you’ can’t remeber or don’t even know which piece of CSS has broken your page and you spend hours trying to figure out a really stupid piece of code, so, my advice is to always test every refresh in as many different browsers as possible.
SJL Website Design
May 27, 2010
great post Andrew. all these tips are really great for beginners. I got taught most of them when I first started, so I guess I was quite lucky!
Thanks.
Regim Hotelier
November 15, 2010
Thanks for the tips. If I was reading your blog a couple of month ago, it would have been much easier for me.
Peter Write
December 27, 2010
Thanks for the tips it will make it easier.
schua_ozven
February 25, 2011
Great article you got there! So far I have learned all of the points you’ve mentioned on this article. What I haven’t got the chance to learn is ‘overflow’. Back then I was having a hard time clearing floats. Thanks to overflow! :)
A tip I would like to share too is like what you’ve mentioned was alphabetizing attributes and shortening values as much as possible for instance -
instead of:
padding bottom: 20px;
padding left: 20px;
padding right: 20px;
padding top: 20px;
this way is much better, cleaner and saves space!
padding:20px;
or in a (top) – (right) – (bottom) – (left) format.
Thanks once again!