* { CSS:resetr }

The lean, mean, CSS-reset machine.

Apply any reset to any type of content:

This site requires JavaScript for full functionality.

Resetting Styles with CSS

This is how your browser styles markup. All content displayed between the two dashed lines is styled only with your browser’s default CSS. As you can see, browsers add stuff like padding and margins to different markup elements, such as heading, paragraph, and list tags.

These default browser styles are sometimes useful, but can interfere with layout, typography, and other aspects of your site’s design. Using a CSS Reset, you can neutralize the many disparate browser defaults and establish a clean foundation for applying CSS consistently across browsers.

There are many CSS Resets available, including everything from very basic resets to comprehensive resets consisting of many styles. There isn’t a “best” CSS Reset for all designs, only a best CSS Reset for your design. To help you find the perfect CSS-reset styles, CSSresetr lets you try all the best CSS Resets on a variety of web pages – even your own.

How to use CSSresetr

CSSresetr is easier than sleeping. Here’s how it works:

Select a CSS Reset from the left dropdown menu
Select a web page from the right dropdown menu
Experiment and have fun! :)

Your chosen CSS Reset will be applied to your chosen content. There are many different types of HTML content available, so have fun experimenting. To clear a reset, just select “[none]” or pick a different reset. By applying different resets to different types of content, you can see the results and choose the best reset styles for your design.

Once you find the perfect reset, visit the CSS Reset Library to download the code.

Additional notes

Here is some additional information about using CSS Resets and CSSresetr.

Using CSS Resets

Resets aren’t for everyone or every project. It is important to understand what you are doing.
Be sure to “restyle” any reset properties – after neutralizing default browser styles, be sure to apply your own styles to anything that needs it. By ensuring that form elements, hyperlinks, and other key elements are well-styled, you help make your site usable and accessible for all visitors.

Using CSSresetr

For now, JavaScript is required to use the site.
So far, the site tests successfully on Firefox, Opera, Chrome, Safari, and IE. If you find a bug, let me know.
The only styles applied to the test content are background:#E1EDDB and overflow:auto, applied to the <pre> tag. This is to enhance usability by highlighting the actual reset code and preventing horizontal scrolling. No other styles are applied to any content appearing within the test area.
CSS-Reset styles are powerful – as you try the different Resets, you’ll see the CSSresetr logo change size, position, and so on. I tried to prevent this by using highly-specific CSS selectors to apply some basic styles, but the Resets are just too powerful ¹.

For questions and comments send email via my contact form.

¹ Actually, I’m just too lazy to re-style all of the reset properties – there’s just too many styles applied by the different CSS Resets.

CSS Reset Library

The Web’s best CSS Resets:

To suggest a CSS Reset, send email via contact form

About CSSresetr

CSSresetr makes it easy to choose the perfect reset styles for your design. I built the site during an icy-cold November weekend and launched on Thanksgiving of 2010. The site was meticulously hand-crafted with HTML, PHP, CSS, jQuery, and plenty of delicious coffee.

Why? Because I’ve been a fan of CSS Resets since first discovering the Universal Reset way back in 2005. CSS resets facilitate designs that display cleanly and consistently across browsers. Neutralizing browser variation provides a level foundation for designing beautiful websites.

Designing over the years, I’ve collected many resets, snippets, tutorials, demos, articles, critiques, and just about anything else related to resetting default browser styles. In 2007, this information inspired two articles, a killer collection of CSS resets and a follow-up with even more killer CSS resets. These articles are basically massive lists of reset styles – useful for quick reference or grabbing what you need, but not as useful for actually finding the best reset for the job. CSSresetr bridges the gap by combining a library of Resets with an interface for checking them out on different types of HTML content.

CSSresetr is a work in progress. To suggest a reset, ask a question, or make a comment, drop a line.

Thanks for visiting :)

Advertise at CSSresetr

There are currently 4 monthly ad spots available:

Ad Placement	Size (in pixels)	Rate (per month)
Header (upper)	`175x75`	$10
Header (lower)	`175x75`	$10
Footer (left)	`150x75`	$7
Footer (right)	`150x75`	$7

The Benefits

Consistent, lasting impressions – Ajax keeps visitors on the same page, so your message really soaks in.
Reach a focused target-audience – CSSresetr is a CSS-utility designed for web-designers and developers.
Support independent producers – Ultimately, it is possible to do what you love, thanks to you.

The Details

Month-to-month payments processed via PayPal
Ads must be relevant and aesthetically correct (nothing goofy)
Ad prices will be super-low until the site gets more traffic ;)
For more info, send email via contact form

Follow Perishable on Twitter