Jun 11 2009

15 Effective Tips and Tricks from the Masters of CSS

Advertisement

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.

About the Author

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.

Homepage

Comments and Discussions
  • Adriano Laurindo, 11 June 2009

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

    Thanks!

  • wouter, 11 June 2009

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

  • Jad Limcaco, 11 June 2009

    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.

  • _mark, 11 June 2009

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

  • Joe, 11 June 2009

    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, 11 June 2009

      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, 28 June 2009

        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, 12 June 2009

      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, 02 December 2009

        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, 25 May 2011

        Your site is very helpful and informative regarding css.

    • Tim, 23 June 2009

      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!

  • SeanJA, 11 June 2009

    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.

  • sergi, 11 June 2009

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

  • Rahul, 11 June 2009

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

  • Phil Houghton, 11 June 2009

    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, 11 June 2009

      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, 12 June 2009

      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.

  • Gregory Raby, 11 June 2009

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

  • Darren Azzopardi, 11 June 2009

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

  • Web designer virginia, 11 June 2009

    Nice compiliation. Thanks!

  • michael, 11 June 2009

    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!

  • Antoine Guédès, 11 June 2009

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

  • Blake, 11 June 2009

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

    • Ondrej Vertat, 12 June 2009

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

  • Metacom Design, 12 June 2009

    Good stuff! Very useful, thank you

  • Joomla_dude, 12 June 2009

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

  • Pål, 12 June 2009

    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?

  • Mar, 12 June 2009

    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, 19 June 2009

      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.

  • Jaap, 12 June 2009

    Nice post! Cheers!

  • Tom, 12 June 2009

    Looks like a great list, reading through it now.

  • Premium Theme Info, 13 June 2009

    Useful material for design.Thanks!

  • David Hucklesby, 13 June 2009

    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.

  • stron_dave, 15 June 2009

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

  • Jamie Allsop, 15 June 2009

    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.

  • Jessie Nunez, 16 June 2009

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

  • Jack, 17 June 2009

    Cool, very useful. Worth reading!

  • Mr.Choice, 22 June 2009

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

  • Aneslin, 25 June 2009

    great bunch of tricks
    thanks a lot

  • Webhostright, 03 July 2009

    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.

  • pom website design, 18 July 2009

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

  • Mostafa, 01 August 2009

    Really usewful.
    Thanks.

  • farbige kontaktlinsen, 20 October 2009

    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.

  • Olir, 29 October 2009

    Thank you. Very useful information!

  • Beck Davies, 02 December 2009

    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.

  • Andrew Butler, 17 February 2010

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

  • strange, 26 February 2010

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

  • feedproxy.google.com, 09 October 2010

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

  • mahjong, 10 February 2011

    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!

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

  • Otomobil, 24 August 2011

    Great collection. Thanks very much.

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

  • open source design, 23 February 2012

    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.

  • Ramidiu, 10 July 2012

    Great css tips for web designers, thanks.

  • Timesheets, 27 July 2012

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

  • ian b, 27 August 2012

    Good stuff! Very useful, thank you

  • Mark Cody, 28 August 2012

    Great Mix of CSS and typography making them very inspirational.

    Thanks for sharing

  • Simon, 16 October 2012

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

  • Joe, 26 November 2012

    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.

  • Darren, 01 February 2013

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

  • Michael, 19 June 2013

    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.

  • Marty Rogers, 15 October 2013

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

    I finally got it, though.

  • InfinPixels, 27 February 2014

    Priceless resource. Chris is my favourite.

  • Jessie Nunez, 16 June 2009

    I second that.

search form
 
image description image description