Noupe Editorial Team June 11th, 2009

15 Effective Tips and Tricks from the Masters of CSS

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.

Noupe Editorial Team

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.

64 comments

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

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

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

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

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

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

    3. 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!

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

  4. 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?

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

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

  5. @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.

  6. 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!

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

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

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

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

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

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

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

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

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

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

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

  17. 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!

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *