CSS Tips I Wish I Knew When I First Started

By   |  Stashed in Webdesign

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

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://www.webdevtuts.net Marcell Purham

    Great post! When I first started using CSS IE and floats took the longest to understand. Great tips

    • http://www.myinkblog.com Andrew Houle

      Thanks Marcell! Agreed, floats take a while, but they are definitely worth the time.

  • http://loneplacebo.com Tony

    CSS Resets are still a mystery to me. SMH.

  • Kevin

    I tend to use “overflow: auto;” over your float-clearing solution. Semantically, it seems to make more sense.

    • http://www.myinkblog.com Andrew Houle

      Good point. I should actually switch to that, it makes more sense.

    • http://www.cooljaz124.com cooljaz124

      Sometime you get a lot of scrollbars in other browsers, even in firefox when you use overflow:auto. overflow hidden seems work perfectly.

    • http://www.myinkblog.com Andrew Houle

      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.

  • http://mariuszciesla.com Mariusz

    Using overflow:hidden to clear floats has its drawbacks. I strongly recommend the clearfix method instead – http://www.positioniseverything.net/easyclearing.html

    • http://blog.aint-no-soul.com biophonc

      true dat. plus it needs less markup and works perfect.

    • http://www.myinkblog.com Andrew Houle

      How is this less markup?

    • http://www.cooljaz124.com cooljaz124

      What are the drawback in using overflow:hidden ??? Let me know.

    • http://blog.aint-no-soul.com biophonc

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

  • http://www.musings.it Federica Sibella

    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.

  • http://aext.net Lam Nguyen

    Nice! The CSS shorthand is the most common skill every web designer should know!

  • http://css-plus.com Jamy

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

    • http://www.myinkblog.com Andrew Houle

      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.

  • http://www.lautr.com Hannes

    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?

    • http://www.myinkblog.com Andrew Houle

      Certainly that would be a worthy addition :)

  • http://www.laser-red-website-design.co.uk Liam O’Leary

    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!

    • http://www.myinkblog.com Andrew Houle

      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

    Great article. I always tend to forget to group similar items together for some reason

  • http://www.weeanja.com Anja

    thanks for this article – made me smile since i recognised my own mistakes… great compilation, though!

  • http://www.crearedesign.co.uk Damian Smith

    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!

    • http://www.myinkblog.com Andrew Houle

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

  • http://www.cooljaz124.com cooljaz124

    Alphabetizing CSS is another good thing to mention.

    • http://davekingsnorth.com Dave Kingsnorth

      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

    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.

    • http://www.myinkblog.com Andrew Houle

      Glad you found the writeup useful! I think I’ll be sticking to overflow: hidden for now.

  • http://www.justforthealofit.com/ TheAL

    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*

  • http://k2joom.com K2Joom

    Nice little guide, bookmarked and shared. Thanks

  • http://www.rsanow.com.au RSA Online

    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.

  • http://go4webapps.com. go4webapps

    very useful post on css.. thanks

  • webbie

    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;
    }

  • http://www.katefosson.com Kate Fosson

    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!

  • http://www.goblinridge.co.uk Yorkshire Web Design

    Interesting article, very informative! Thanks Ted.

  • sebastian green

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

  • http://mysmilies.com Gbuster

    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.

  • http://www.deluxeblogtips.com/ Deluxe Blog Tips

    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.

  • http://www.digitalartempire.com Digital Art Empire

    nice read Andrew
    - informative and well written – css shorthand seems very useful still getting my head round all these techniques

    cheers

  • Sara

    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__

    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

    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

  • http://tutorijali.hdonweb.com Ivan

    Nice tips, verry usefull

  • http://www.angelbolanos.com injected

    nice tutorial!!

  • http://www.covicstudio.com David Coe

    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!

    • http://www.cooljaz124.com cooljaz124

      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

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

      • http://www.sshcommands.co.uk SSH Commands

        Firebug is great… but doesn’t work on Internet Explorer 6. This is where adding border’s really helps.

  • http://www.kchains.com Sherry

    Just want to learn CSS , but it is a little difficult to me, thanks for your tips.

  • http://www.blkmtnstudio.com/ Greg Althoff

    thanks for this – I’ll def. be taking these into consideration when re-applying myself in the coming months with CSS.

  • http://www.dzinepress.com/ Dzinepress

    really useful CSS tips. thanks

  • http://www.threestyles.com Shane Jeffers

    These are some simple effective ideas. Great job Andrew!

  • http://nicholastuck.com Nicholas Tuck

    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!

  • http://www.searchengineoptimization.co.uk Mike

    Great Post, nice piece of code which do the trick and sometimes we face this overflow issue and end up with layers

  • http://www.brillcreative.co.uk rjbrill

    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.

  • http://www.sjlwebdesign.co.uk SJL Website Design

    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.

  • http://www.cazare-regim-hotelier.com/ Regim Hotelier

    Thanks for the tips. If I was reading your blog a couple of month ago, it would have been much easier for me.

  • http://forworkingathome.blogspot.com/ Peter Write

    Thanks for the tips it will make it easier.

  • http://www.ozven.com schua_ozven

    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!