How to Make Your CSS Consistent Across Browsers 
Tags: css
Published: 2018-05-29 09:45:17

---
title: How to Make Your CSS Consistent Across Browsers 
published: true
description: CSS reset property presents a short set of rules that resets styling of all elements to a consistent baseline.
tags: CSS.
---
Maybe this post should be the first of the firsts because it's about how to start your CSS. Then again, you should be able to understand what exactly it is you're doing so I'm not too much late with this.

**Reset in code presents a short set of rules that resets styling of all elements to a consistent baseline. It is needed because the styling isn't consistent across browsers. You don't want something like pre-styling of e.g. table element, to mess with you when you're on.**

## Practice

When I was starting with CSS it is said to me that on the beginning you should always write:

     *{
        margin:0;
        padding:0;
     }

This was the basic CSS Reset.

*Some of the most common elements that are styled differently among different browsers are hyperlinks (&lt;a>), images (&lt;img>), headings (&lt;h1> through &lt;h6>), and the margins given to various elements. It is a well-known fact that browsers add a certain amount of padding to almost everything.*

The example of the different styling of the checkout button between browsers:

![CSS Reset differences between browsers](https://kolosek.com/content/images/2018/03/indeterminate-checkboxes-browser-comparison.jpg)

The example of the different styling of the different elements (headline, link, span, code, blockquote):

![CSS Reset differences between browsers](https://kolosek.com/content/images/2018/03/Mask-Group.png)

Every browser has a default HTML formatting and you can see it under **"user agent stylesheet"** in inspect mode. If style is added for the specific element, its default browser formatting is overwritten.   

![user-agent-stylesheet](https://kolosek.com/content/images/2018/04/user-agent-stylesheet.jpg)

## Reset Scripts

My favorite CSS reset script is one from [http://html5doctor.com](http://html5doctor.com):

     html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,  pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
         margin:0;
         padding:0;
         border:0;
         outline:0;
         font-size:100%;
         vertical-align:baseline;
         background:transparent;
     }
     
     body {
         line-height:1;
     }
     
     article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{ 
         display:block;
     }
     
     nav ul {
        list-style:none;
     }
     
     blockquote, q {
        quotes:none;
     }
     
     blockquote:before, blockquote:after, q:before, q:after {
        content:'';
        content:none;
     }
     
     a {
        margin:0;
        padding:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
     }
     
     /* change colors to suit your needs */
     ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
     }
     
     /* change colors to suit your needs */
     mark {
        background-color:#ff9;
        color:#000; 
        font-style:italic;
        font-weight:bold;
     }
     
     del {
        text-decoration: line-through;
     }
     
     abbr[title], dfn[title] {
        border-bottom:1px dotted;
        cursor:help;
     }
     
     table {
        border-collapse:collapse;
        border-spacing:0;
     }
     
     /* change border color to suit your needs */
     hr {
        display:block;
        height:1px;
        border:0;   
        border-top:1px solid #cccccc;
        margin:1em 0;
        padding:0;
     }
     
     input, select {
        vertical-align:middle;
     }

Some of defined styles are pretty standard (ones for &lt;a> and for &lt;ul>), some are added to help accesability (ones for &lt;abbr> and &lt;dfn>) and some are added extra (&lt;hr>).

There is a list of more reset scripts that you can use:
* [meyerweb](https://meyerweb.com/eric/tools/css/reset/), 
* [carrer web](http://www.vcarrer.com/2010/05/css-mini-reset.html), 
* [yui library](https://yuilibrary.com/yui/docs/cssreset/), 
* [Simon Harte HTML5-Reset](https://github.com/murtaugh/HTML5-Reset/blob/master/assets/css/reset.css).

Instead of CSS reset, some developers use **CSS normalize** (and some refer to it as “the new reset”). While reset is used for wiping everything out and making your project "tabula rasa", normalize keeps good practices while neutralizes cross-browser style inconsistency. I will write about CSS normalize in the future for sure. Until then check [this post](https://cssreset.com/scripts/normalize-css/).

## Conclusion

It is not necessary to Reset your CSS, but it is to be aware of pre-styling of browsers and CSS reset existence.

This article is originally published on [Kolosek Blog](https://kolosek.com/content/images/2018/04/user-agent-stylesheet.jpg).