A CSS User Agent Stylesheet simply refers to the default styles that browsers apply to web pages. It is of the lowest importance considering User Styles and Author styles will overwrite these. Each browser is a little different in how it styles html. Many web designers will apply a ‘css reset‘ to wipe all the browsers ‘user agent’ styles.Different browsers set different default css rules so in order to achieve consistency a ‘reset’ is needed.

CSS Resets

This is a list of some of the css resets available.

Here is a list of 2016s most popular CSS resets.

Lets try one of these css resets. First of all we need a html5 document.

If we look at the html document in the browser it will have browser css styles from the css user agent stylesheet.

CSS User Agent Stylesheet.

We can see the styles from the css user agent stylesheet by opening up the web console.

CSS User Agent Stylesheet.
CSS User Agent Stylesheet
CSS User Agent Stylesheet
CSS User Agent Stylesheet
CSS User Agent Stylesheet
CSS User Agent Stylesheet
CSS User Agent Stylesheet
CSS User Agent Stylesheet
CSS User Agent Stylesheet

If we download the CSS reset by Eric Meyer we can link it to our html document and see what happens. On line 6 is a ‘link’ tag that links the ‘reset.css’.

And here is what now happens when the html document is loaded into the browser.

CSS User Agent Stylesheet
The page appearance has alters once a ‘css reset’ is applied.

The web designer is now free to start adding css styles. This could be seen as starting with a blank canvas which is nice.

And finally here is the css reset by Eric Meyer in all it’s glory. It is probably better to keep this as an external file as opposed to adding it to ‘style’ tags in the ‘head’ of the ‘html’ document.

CSS User Agent Stylesheet

Each browsers css user agent stylesheet has slight differences and this can lead to frustration. The behaviour of elements on a webpage will slightly vary due to the variations from browser to browser.


CSS3 logo. CSS User Agent Stylesheet

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *