How to Use CSS Reset

One of the biggest challenges front end developers face is having different browser versions on different operating systems display the page consistently. Even if you build your page with Firefox or Chrome on Windows, the page may display differently on those browsers with the Mac OS or Linux. Part of the reason is that each browser has it's own default stylesheet. One browser may use more padding on an unordered list while another may use just margin. In order to make these differences easier to deal with on the front end is to use a special stylesheet that sets all of the browser defaults, regardless of maker to uniform properties. These stylesheets are known as CSS resets. Two of the more popular resets in use are from YUI and Eric Meyer, either one is good but depending on your site one may be better for your particular needs. The key to using them is to make sure they load before the rest of your styles. In Drupal, the best way to achieve this is to put your reset first before the rest of your stylesheets in your themes info file. This is very important because if it loads later it could reset some of your sites files. But done correctly, all browsers will be at the same point before your custom styles take effect. If you're using one of the many base themes available for Drupal, you won't need to worry about this as all of them use one form of reset by default. Some of them even give you the option of selecting which reset you can use. However for those that don't offer you a choice and you wish to use something else, you need to be aware of how the stylesheets load so that your custom reset loads at the correct time, as many of the base themes default styles may depend on the reset being present.