Design

15 Effective Tips and Tricks from the Masters of CSS

June 11th, 2009

There are thousands of sites out there offering tips and tricks for using CSS. But how do you know where that information is coming from? Who says the people writing these “tips” know what they’re talking about? For all you know, it could be someone who has not clue what CSS even stands for, let alone how to use it effectively.

But that’s not the case with the experts below. They’re all well-known for their mastery of CSS and all that goes along with it. Read on for their tips and tricks with regards to everything from avoiding hacks to understanding the box model.

Peter-Paul Koch: Avoid CSS Hacks

As web design has progressed, the endlessly nested table has transformed into the endlessly complicated CSS hack. In many cases, CSS hacks solve one bug by exploiting another one; not exactly the most stable way to fix something. When the next version of the browser is released, it might fix neither or both bugs, or it might fix one but not the other. In any case, it’s likely your hack might end up not working, or not being necessary any longer.

Jonathan Snook: Avoid Unnecessary Selectors

To keep your style sheets as short and condensed as possible, avoid repeating yourself by only specifying the minimum number of selectors. In other words, do you really need to specify UL and LI? Why not just specify the UL? The same goes for other elements likely to be nested. Just specify the upper-most level and leave the rest to inherit those styles.

Roger Johansson: Specify a Maximum Width for Em-Based Layouts

Creating an elastic layout that don’t specify a maximum width in anything other than em units is a quick way to make a very uncomfortable site. As your visitors increase the text size, your layout gets wider. But what happens when they increase the size by more than one or two em units? Your layout just gets wider and wider and pretty soon they have to scroll horizontally in order to read an entire line. Specify a maximum width to avoid that problem and make your site more user-friendly.

Trevor Davis: Set a Consistent Base Font Size

By setting your base font size at 62.5%, you end up with a font size of 10 pixels. This makes 1 em equal to 10 pixels. 1.2 em is then equal to 12 pixels. It simplifies font sizing in all of your selectors thereafter.

/>

Dan Cederholm: Use Negative Margins

Using negative margins can greatly simplify your code. Instead of specifying positive margins for a dozen or more elements, why not just specify a negative margin for one? It makes your style sheets shorter and less complex.

Ben Henick: Don’t Add Markup Unless Context Encourages It

When transitioning from table-based layouts, many designers are tempted to add in an abundance of container elements. But CSS isn’t the same as tables. Thinking through your design ahead of time is one way to avoid this, as is focusing on the information first. Try to only use divs and spans for content elements that share a common purpose or classification and are repeated across multiple pages.

Eric Meyer: Use Print-Specific Style Sheets

Forget about creating separate printer-friendly pages for your content. Use CSS to create media-specific styles for your documents instead. Printer-friendly style sheets are easy to create and avoid problems designers used to encounter regarding the regular version and printer-friendly version being slightly different from each other. After all, with this method you’re not touching the page markup at all.

Wolfgang Bartelme: Center with CSS

For people just starting out with CSS, centering an entire website can sometimes seem like an impossibility. But it’s definitely possible and actually relatively easy to achieve.

Trenton Moss: Use Mobile-Specific Stylesheets

With more and more people browsing the web primarily through mobile devices, it’s important to make sure your website is optimized for those visitors. While most handhelds will render pages reasonably well using standard CSS, it’s still not the best user experience on a 3″ screen. Create a separate mobile style sheet to optimize the experience for mobile users.

Chris Coyier: Use the CSS Overflow Property Correctly

There are four different values available for the CSS overflow property: hidden, visible, scroll, and auto. By understanding what each of these does and how each behaves, you open up a lot more options for your site’s layout.

Ethan Marcotte: Create Fluid Grids with CSS

The idea of creating a fluid grid design, especially with CSS, is likely to send shivers down the spines of many web designers. But it is possible, and is definitely preferable to creating them with tables.

Jonathan Snook: Use CSS Shorthand

Using shorthand is another way to simplify and shorten your stylesheets. Instead of declaring separate styles for each margin (margin-left, margin-right, margin-top, margin-bottom), just declare them for all four at one time. The same goes for other elements, such as font, border, or background.

Chris Coyier: Understand the CSS Box

Everything element in CSS is a rectangular box. Padding, margins, height, width and borders all interact with these rectangular boxes. Gaining a real understanding of how these things interact will make life as a designer infinitely easier.

Roger Johansson: Be Wary of Hiding Things With CSS

It’s tempting when you want to hide an element on your page to use “display:none.” The problem with this, though, is that this particular declaration means that the contents within that element are completely hidden—they aren’t printed, displayed, or spoken. This can cause issues for those using screen readers as opposed to viewing your website. It can also cause issues when you’re going to hide something until a user performs a certain action (most likely with JavaScript).

Peter-Paul Koch: Know When to Use Strict Mode or Quirks Mode

Strict mode and quirks mode apply to the two different ways modern browsers use to interpret CSS. By understanding what each one does and then implementing the correct one for your design, you can greatly improve your site’s functionality.

Author: Cameron Chapman

Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags:

64 comments for „15 Effective Tips and Tricks from the Masters of CSS
  1. Adriano Laurindo on June 11th, 2009 at 1:30 am

    Great CSS tips and tricks compilation. I was looking for something like that.

    Thanks!

  2. wouter on June 11th, 2009 at 1:39 am

    great tips from the masters..
    gives a good overview.

  3. Jad Limcaco on June 11th, 2009 at 1:53 am

    Great article! I have always used display:none for some of my jquery, I guess I will have to think about that again.

    Thanks for the awesome article.

  4. _mark on June 11th, 2009 at 3:11 am

    nice list different than the usual tips (resets frameworks etc) ..thank you!

  5. Joe on June 11th, 2009 at 4:08 am

    UGH, I’m sorry, but Chris Coyier is not a master of CSS. He gets a lot of attention for simple tips since he does an excellent job of teaching css through screencasts. But I would not add him in a list of people like Eric Meyer, Ethan Marcotte or Dan Cederholm.

    • Noupe on June 11th, 2009 at 11:38 am

      Chris Coyier is a popular figure in the design community, well known for his general all round expertise with CSS. He established an excellent web presence through CSS-Tricks.com, answers the readers questions on his forum and on Smashing Magazine’s “Ask SM” weekly topic.
      I wouldn’t mind at all considering him an iconic figure in the CSS world.

      • Joe on June 28th, 2009 at 9:12 pm

        Although technically not a ‘master’ I can see your point in including his tips in this article. I think I’m simply over analyzing the post’s title. Kudos to Chris too, like I said he does an excellent job and I applaud him for what he has done on his blog and forum.

    • Chris Coyier on June 12th, 2009 at 5:33 am

      It’s true… I’m not in the same league as those guys, but I do write CSS day in and day out and have been for years and years. I spend a lot of time thinking about it and writing about it and helping others learn it.

      I’m honored, as always, that Noura chose to include some articles of mine here.

      • Mary Lou on December 2nd, 2009 at 9:49 am

        Chris, you would definitely put you in that league because I learned a lot from your articles! Thanks for that, and btw great post, Cameron.

      • Css on May 25th, 2011 at 2:43 pm

        Your site is very helpful and informative regarding css.

    • Tim on June 23rd, 2009 at 5:41 am

      Based off of Chris’ explaination of the overflow I would say that he is very knowledgable of CSS. I have a hard time calling anyone a ‘master’ but I believe he’s easily qualified to be on this list. Thanks for your input Chris!

  6. SeanJA on June 11th, 2009 at 4:29 am

    I tend to try and use visibility: hidden; rather than display: none; It has the added bonus of not making the page jump when you apply it with javascript.

  7. sergi on June 11th, 2009 at 5:19 am

    love your list here. it’s very digestible. and SeanJA’s comment is helpful too.

  8. Rahul on June 11th, 2009 at 5:48 am

    Well I just am a fan of this article. Very useful CSS hacks. thanks.

  9. Phil Houghton on June 11th, 2009 at 10:33 am

    Sorry. On what planet is it a good tip to set your base font size to 62.5%? Is this tip sponsored by Vision Express?

    • LA Front End on June 11th, 2009 at 6:49 pm

      It just makes for easier math. Like Trevor said, it turns your base font into 10px. Need a headline 16px? 1.6em. Much easier, especially with fluid layouts.

    • Ondrej Vertat on June 12th, 2009 at 8:22 am

      It’s the best u can do about font-size. 1em = 10px, 1.1em = 11px etc. Very clever and easy. And the same in all browsers of course.

  10. Gregory Raby on June 11th, 2009 at 10:46 am

    That CSS Box thing is a good reminder. I always end up mixing padding & margin. Thanks

  11. Darren Azzopardi on June 11th, 2009 at 11:28 am

    @Phil Houghton

    Setting a base font size doesn’t necessarily mean you will be using that actual size. Its just a way of declaring universal size within your website.

    So from then on values such as em would be equivalent to your base font size rather than the browsers style sheet.

    Take a look at some style sheets when you get the chance, you will see some people have a much higher base font size as suggested.

  12. Web designer virginia on June 11th, 2009 at 2:05 pm

    Nice compiliation. Thanks!

  13. michael on June 11th, 2009 at 3:15 pm

    i didn’t realise we need experts to tell us these things which are all fairly basic. but still, all true and relevant and if you don’t know about them then you should!

  14. Antoine Guédès on June 11th, 2009 at 6:56 pm

    Hey! That’s great.
    Thanks for those tips. ;)

  15. Blake on June 11th, 2009 at 11:08 pm

    You’re missing one: Resetting your CSS before you even get started.

    • Ondrej Vertat on June 12th, 2009 at 8:24 am

      Good point. Eric Mayer reset. I miss it in article.

  16. Metacom Design on June 12th, 2009 at 1:57 am

    Good stuff! Very useful, thank you

  17. Joomla_dude on June 12th, 2009 at 9:58 am

    Great guide why dident I find this when I started to build css styling…

  18. Pål on June 12th, 2009 at 9:59 am

    How am I supposed to take Peter-Paul Koch’s article serious when he manages to utter: “What we have now are, for better or (usually) worse, the definitive, final versions of these browsers. There will never be a next version that could make a mess of your pages.”

    Are there anyone out there who seriously think that there will ever be a “The Definite Version” of any browser?

  19. Mar on June 12th, 2009 at 3:57 pm

    I use this to center content. I think it is a better solution. Works in all browsers.

    #center_content{
    position:absolute;
    left:50%;
    width:800px;
    margin-left:-400px;
    }

    • anazonda on June 19th, 2009 at 7:14 pm

      Except that will put some of the content outside of the outer margins of the bowser if the window is even slightly below the 800px width.

  20. Jaap on June 12th, 2009 at 4:25 pm

    Nice post! Cheers!

  21. Tom on June 12th, 2009 at 7:51 pm

    Looks like a great list, reading through it now.

  22. Premium Theme Info on June 13th, 2009 at 7:10 pm

    Useful material for design.Thanks!

  23. David Hucklesby on June 13th, 2009 at 8:50 pm

    Many sites that use 62.5% as base font have display problems this end. I have a minimum font size of 12px set in my browsers, so all text is 20% larger than the designer intended. Many designs will not handle larger font sizes.

    For mobile devices I use media queries. They seem better supported than media=handheld – on the iPhone for example.

  24. stron_dave on June 15th, 2009 at 1:24 am

    some of the tips are just answers to my questions wchich I was looking for. thank you so much. :*

  25. Jamie Allsop on June 15th, 2009 at 1:50 pm

    These are some really great CSS tips and tricks. Setting the base font size to 62.5% makes life much easier when styling up font sizes.

  26. Jessie Nunez on June 16th, 2009 at 3:59 am

    Great advice. I liked the one about unnecessary selectors. Gotta put that one into practice. That whole blog was great.

  27. Jack on June 17th, 2009 at 3:01 pm

    Cool, very useful. Worth reading!

  28. Mr.Choice on June 22nd, 2009 at 6:21 am

    Quit insightful stuff! These tips are overly essential and will help bloggers gain enough knowledge about CSS.

  29. Aneslin on June 25th, 2009 at 1:02 am

    great bunch of tricks
    thanks a lot

  30. Webhostright on July 3rd, 2009 at 1:57 am

    Thanks, its taken me a bit of slow and steady reading across a few nights to read through these but its worth it, helping me understand more.

  31. pom website design on July 18th, 2009 at 7:50 pm

    Some useful tips here, thanks for sharing it with us.

  32. Mostafa on August 1st, 2009 at 11:18 pm

    Really usewful.
    Thanks.

  33. farbige kontaktlinsen on October 20th, 2009 at 9:01 am

    Twitter is really a great invention, but I think blogging is even more important to create some traffic. But I can use some of the tips.

  34. Olir on October 29th, 2009 at 12:15 am

    Thank you. Very useful information!

  35. Beck Davies on December 2nd, 2009 at 10:28 am

    For ages I’ve been working out elements sizes in em’s using 1em = 16px, and even though I’m quite happy with doing the math, setting font-size to 62.5% is going to save me so much time.

  36. Andrew Butler on February 17th, 2010 at 2:46 am

    Some good tips here. Eric Meyer as ever, on the ball. Print styleshheets a must and to of my must-do list.

  37. strange on February 26th, 2010 at 3:03 am

    Thank you! It’s nice that you share useful information! Really useful.

  38. feedproxy.google.com on October 9th, 2010 at 8:35 pm

    Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds alsoâ?¦. Greetings from the Speedy DNS

  39. mahjong on February 10th, 2011 at 2:25 am

    Youre so cool! I dont suppose Ive learn something like this before. So nice to search out any individual with some authentic thoughts on this subject. realy thank you for starting this up. this web site is something that is needed on the web, somebody with a bit originality. helpful job for bringing one thing new to the web!

  40. All Web Services Website Design on March 8th, 2011 at 2:13 pm

    Many thanks for this post this will be quite suprising on how many developers will learn a few bits from this.

  41. Otomobil on August 24th, 2011 at 4:28 pm

    Great collection. Thanks very much.

  42. Web Designer - Ray Creations on November 6th, 2011 at 2:29 pm

    It is nice to get the tips directly from the experts on css. Enjoyed reading the article.

  43. open source design on February 23rd, 2012 at 10:24 am

    That’s all well and good, but I’ve had major issues with centering working properly in multiple browsers. I was able to get it to work by centering a DIV and having everything in it use a static left margin. It’s a hack, but it worked.As for setting a max width, sure… but how? And you know what else would be nice? How about I set a width and the element is that width including content, padding, and border. That’s one of the only things M$ ever got right compared to other browsers.

  44. Ramidiu on July 10th, 2012 at 1:36 pm

    Great css tips for web designers, thanks.

  45. Timesheets on July 27th, 2012 at 2:08 am

    To be precise these websites are great assets for all CSS beginners and employees.

  46. ian b on August 27th, 2012 at 2:55 pm

    Good stuff! Very useful, thank you

  47. Mark Cody on August 28th, 2012 at 8:40 pm

    Great Mix of CSS and typography making them very inspirational.

    Thanks for sharing

  48. Simon on October 16th, 2012 at 3:37 pm

    Good reminder about using negative values for margins. Often overlooked possibility.

  49. Joe on November 26th, 2012 at 4:23 pm

    This is information about of CSS, CSS really helpful of Web Designing, I have lot of interesting Web Designing. What ever it is, Blog is nice, Thanks Hi.

  50. Darren on February 1st, 2013 at 1:48 am

    font-size to 62.5% – let me try that one. Looks like it could make things easier.

  51. Michael on June 19th, 2013 at 5:59 am

    Excellent post I especially like the fact that you mentioned creating fluid designs vs using tables. So many old timers still use tables for everything and it makes future updates and modifications so much more challenging.

  52. Marty Rogers on October 15th, 2013 at 1:25 pm

    Awesome tips – the CSS box is the one that took me the longest to figure out.

    I finally got it, though.

  53. InfinPixels on February 27th, 2014 at 4:30 am

    Priceless resource. Chris is my favourite.

  54. Jessie Nunez on June 16th, 2009 at 4:00 am

    I second that.