01. Keep CSS out of the markup.

Linking and/or importing stylesheets would seem to be a no-brainer to the intermediate or advanced CSS developer, but I want to stress why this is so important. I’ve seen many sites start out with clean, well-organized CSS files but then get littered as time goes by, with embedded or even inline styles (due to fast updates needed on short deadlines, or possibly sometimes even pure laziness).

Imagine that you are working on an extremely large-scale website with hundreds of ways content can appear. You have fast deadlines, so you opt for making “quick fixes” or updates by using embedded or inline CSS. Years go by, and this habit continues… Until one day you’re told the site is being completely redesigned (but all the content is to remain the same), and you only have a week to build it (including testing).

Normally, this would have been a fairly simple task of updating the stylesheet(s). Except you have years worth of “quick fixes” scattered throughout the site — and no way to remember where they all are. So now you have to either a) find a way to clean everything up and get everything styled for the redesign in one week (Good luck!), or b) find a new job.

Don’t make your job harder than it really has to be. Linking and/or importing your stylesheets is not optional. Create it clean, keep it clean, and you’ll be much happier.

NOTE: Be careful of adding too many linked and/or imported stylesheets in your markup. If you’re tempted to create a new stylesheet every time you make an update or add new content, you’re not doing yourself any favors. Excessive linking and/or importing can make bug-fixing difficult, and make your styles harder to maintain. It is understandable to want separate stylesheets for different sections or components for larger websites (I’ll go more into that later). Just be careful that you don’t go overboard.

It is worth mentioning that linking too many stylesheets requires additional HTTP requests, which can add up, and potentially hinder performance. Also, Microsoft Internet Explorer 6 has a limit of 32 linked stylesheets. Read more…

• Top CSS Resources List
• Top 100 CSS Tips
• Top One Line Css Tips
• How CSS3 works
• What are the HTML basics?
• Top CSS Tips
• CSS Border images issues
• CSS Specificity
• CSS Rollover Tips
• How to Organizing Your CSS Files

CSS4 Topics - csshook css examples where you can get css3 and css4 advanced topics and exmaplesand they hit the nail on the head with some great CSS tips in this list. 

55 CSS Techniques You Can’t Live Without - Smashing Magazine is a fantastic resource for web design tips and tricks, and they hit the nail on the head with some great CSS tips in this list. It’s really amazing all of the things your site can display using these advanced techniques.

CSS Experiments Advanced Topics - csscody  is a fantastic resource for css tips and tricks, and they hit the nail on the head with some great CSS tips in this list. jquery examples and  demo links 

How to Make Sexy Buttons With CSS - Many people in the real world wouldn’t consider anything on the web to be sexyper se, but then, what do they know? Make sure your website eschews sexiness with this sexy button tutorial by Oscar Alexander.

6 Keys to Understanding Modern CSS-Based Design - much like web design in general, CSS has expanded and evolved over the years, and many designers still need to catch up. Snook explores modern navigation and floating techniques to bring you up to speed.

CSS Slicing Guide - Many professional designers begin building their website layouts and themes in graphics programs first before actually creating the code. Sometimes, the process of transferring these ideas over to code can be daunting; use this CSS slicing guide to make such transitions smooth. Read more…

• Top 100 CSS Tips
• CSS Sitemap design Tutorial
• How CSS3 works
• How to create a good css
• Top CSS Tips
• What is CSS Framework
• 100+ CSS Tutorials
• Top One Line Css Tips
• CSS Tricks
• Clean CSS Tips

1. Use Reset.Css

   When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

   Here are few commonly used reset.css frameworks - Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli

2. Use Shorthand CSS

   Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all - it makes the code clearner and easier to understand.

   Instead of creating CSS like this

   view plaincopy to clipboardprint?

   1. .header {  
   2.       background-color: #fff;  
   3.       background-image: url(image.gif);  
   4.       background-repeat: no-repeat;  
   5.       background-position: top left;   
   6.     }  

   It can be short-handed into the following:

   view plaincopy to clipboardprint?

   1. .header {  
   2.       background: #fff url(image.gif) no-repeat top left  
   3.     }  

   More - Introduction to CSS Shorthand, Useful CSS shorthand properties

3. Understanding Class And ID

   These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use. Read more…

   • Top CSS Resources List
   • What is CSS Framework
   • Top 100 CSS Tips
   • CSS tricks
   • How to create a good css
   • CSS4 SELECTORS
   • CSS Rollover Tips
   • 100+ CSS Tutorials
   • 150+ CSS Samples
   • Top One Line Css Tips