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

    

CSS Rounded Corners

Rounded corners is one of the most popular and frequently requested CSS techniques. There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. Here are easy ways to achieve this effect.

• Even More Rounded Corners With CSS- Single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you could want. 
  Demo :
• CSS Gallery : css Examples
   

  ---

• Rounded corners in CSS- Simple bordered div which contained four divs that each had a background-image and that were positioned in each of the corners.
• Liquid rounded corners- For liquid design and transparent scrolling - tutorial and stylesheet
• Mountaintop Corners- easier way for creating decent rounded corners.

CSS Sprites

CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

• CSS Sprites: Image Slicing’s Kiss of Death- Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them - CSS-Tricks
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance- Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages

Read more…

• Top CSS Resources List
• Top One Line Css Tips
• CSS Tricks
• CSS3 Multi-Column Module
• How CSS3 works
• How to create a good css
• Top CSS Tips
• 150+ CSS Samples
• Clean CSS Tips
• CSS Sitemap design Tutorial

we have all come to learn many css tricks and techniques that help us. here you can find full list of top css tips and tricks.

1. Absolute positioning inside a relative positioned element.

Putting an absolutely positioned element inside a relatively positioned element will result in the position being calculated on its nearest positioned ancestor. This is an excellent technique for getting an element to “stick” in a certain spot where you need it, for instance, a header badge.

Read more about positioning:

• PositionisEverything
• W3 Specifications

2. Z-Index and positioning.

z-index can be somewhat of a mystery to developers. Often, you will find designers putting a very large z-index value on a div or element in order to try and get it to overlap another element. What we need to keep in mind, is that z-index only applies to elements that are given a “position” value. If you find an element will not adhere to a z-index rule you’ve applied, add “position:relative” or “position:absolute” to the troublesome div.

Read more about z-index:

• Z-index Screencast
• Z-index Examples
• W3 Specifications
• CSS Examples

3. Margin Auto

Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, “margin: auto” will only work when a width is declared for the element. This also means to apply margin: auto to inline elements, the display first must be changed to block.

Read more…

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