How to Remove Default Browser Styling With a Master Stylesheet

Get the facts with these tips

Browsers you should be testing with
Browsers you should be testing with. courtesy J Kyrnin

All web browsers include what is know as "defauly styles." These are styles that dictate the look and feel of HTML elements in the absence of any other style information. For example, in nearly every browser the default look of hyperlinks is a bright blue color with an underline. This is how those links look unless you tell them to display in a different way. 

Default browser styles can be helpful, but in many cases web designers want to remove these styles so that they can start fresh with styles that they are 100% in control of.

This is done using what is known as a "master stylesheet."

A master stylesheet should be the first stylesheet you call in all your documents. You use a master stylesheet to clear out the default browser settings that can cause problems in cross-browser Web design. Once you've cleared out the styles with a master stylesheet, your design starts from the same place in all the browsers - like a clean canvas for painting.

Global Defaults

Your master stylesheet should start by zeroing out the margins, paddings and borders on the page. Some Web browsers default the body of the document to 1 or 2 pixels indented from the browser pane edges. This makes sure that they all display the same:

html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 }

You also want to make the font consistent.  Be sure to also set the font size to 100 percent or 1em, so that your page is accessible, but the size is still consistent.

And be sure to include the line-height.

body {
 font: 1em/1.25 Arial, Helvetica, sans-serif;
 }

Headline Formatting

Headline or header tags (H1, H2, H3, etc.) typically default to bold text with large margins or padding around them. By clearing the weight, margins and padding, you ensure that these tags still remain larger (or smaller) than the text around them without having extra styles:

h1, h2, h3, h4, h5, h6 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 }

You might want to consider setting specific sizes, letter-spacing and paddings to your headline tags, but that really depends on the style of the site you're designing and should be left out of the master style sheet. You can add more styles for these headings as needed for your specific design.

Plain Text Formatting

Beyond headlines, there are other text tags that you should be sure to clear out. One set that people often forget are the table cell tags (TH and TD) and form tags (SELECT, TEXTAREA and INPUT). If you don't set those to the same size as your body and paragraph text, you may be unpleasantly surprised at how the browsers render them.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
 margin: 0;
 padding: 0;
 font: normal normal normal 1em/1.25 Arial, Helvetica, sans-serif;
 }

It's also nice to give your quotations (BLOCKQUOTE and Q), acronyms, and abbreviations a little extra style, so that they stand out a little more:

blockquote {
 margin: 1.25em;
 padding: 1.25em
 }
 q {
 font-style: italic;
 }
 acronym, abbr {
 cursor: help;
 border-bottom: 1px dashed;
 }

 

Links and Images

Links are easy to manage and to change from that aforementioned bright blue underlined text. I prefer to always have my links remain underlined, but if you prefer it a different way you can set these options separately. I also don't include colors in the master style sheet, because that depends upon the design.

a, a:link, a:visited, a:active, a:hover {
 text-decoration: underline;
 }

With images, it's important to turn off the borders. While most browsers don't display a border around a plain image, when the image is linked, the browsers turn on the border. To fix this:

img {
 border: none;
 }

Tables

While tables are no longer used for layout purposes, you site may still use them for actual tabluar data. This is a fine use of HTML tables. We've already made sure that the default text size is the same for your table cells, but there are a few other styles you should set so that your tables stay the same:

table {
 margin: 0;
 padding: 0;
 border: none;
 }

Forms

Like with other elements, you should clear out the margins and paddings around your forms. Another thing I like to do is rewrite the form tag as "inline" so that it doesn't add extra space where you place the tag in the code. As with other text elements, I define the font information for select, textarea and input up above, so that it's the same as the rest of my text.

form {
 margin: 0;
 padding: 0;
 display: inline;
 }

It's also a good idea to change the cursor for your labels. This helps people to see that the label will do something when they click it.

label {
 cursor: pointer;
 }

Common Classes

For this part of the master stylesheet, you should define classes that make sense to you. These are some of the classes I use most often. Note that they are not set to any particular element, so you can assign them to whatever you need:

.clear { clear: both; }
 .floatLeft { float: left; }
 .floatRight { float: right; }
 .textLeft { text-align: left; }
 .textRight { text-align: right; }
 .textCenter { text-align: center; }
 .textJustify { text-align: justify; }
 .blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
 .bold { font-weight: bold; }
 .italic { font-style: italic; }
 .underline { text-decoration: underline; }
 .noindent { margin-left: 0; padding-left: 0; }
 .nomargin { margin: 0; }
 .nopadding { padding: 0; }
 .nobullet { list-style: none; list-style-image: none; }

Remember that because these classes are written before any other styles and they are just classes, they are easy to override with more specific style properties that occur later in the cascade.

If you find that you set a common class on an element and it doesn't take effect, you should check to make sure that there is not some other style in one of your later stylesheets affecting that same element.

The Entire Master Stylesheet

/* Global Defaults */
 html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 }
 body {
 font: 1em/1.25 Arial, Helvetica, sans-serif;
 }
 
 /* Headlines */
 h1, h2, h3, h4, h5, h6 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 }
 
 /* Text Styles */
 p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
 margin: 0;
 padding: 0;
 font: normal normal normal 1em/1.25 Arial, Helvetica, sans-serif;
 }
 blockquote {
 margin: 1.25em;
 padding: 1.25em
 }
 q {
 font-style: italic;
 }
 acronym, abbr {
 cursor: help;
 border-bottom: 1px dashed;
 }
 small {
 font-size:.85em;
 }
 big {
 font-size:1.2em;
 }
 
 /* Links and Images */
 a, a:link, a:visited, a:active, a:hover {
 text-decoration: underline;
 }
 img {
 border: none;
 }
 
 /* Tables */
 table {
 margin: 0;
 padding: 0;
 border: none;
 }
 
 /* Forms */
 form {
 margin: 0;
 padding: 0;
 display: inline;
 }
 label {
 cursor: pointer;
 }
 
 /* Common Classes */
 .clear { clear: both; }
 .floatLeft { float: left; }
 .floatRight { float: right; }
 .textLeft { text-align: left; }
 .textRight { text-align: right; }
 .textCenter { text-align: center; }
 .textJustify { text-align: justify; }
 .blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
 .bold { font-weight: bold; }
 .italic { font-style: italic; }
 .underline { text-decoration: underline; }
 .noindent { margin-left: 0; padding-left: 0; }
 .nomargin { margin: 0; }
 .nopadding { padding: 0; }
 .nobullet { list-style: none; list-style-image: none; }

Original article by Jennifer Krynin. Edited by Jeremy Girard on 10/6/17

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Remove Default Browser Styling With a Master Stylesheet." ThoughtCo, Oct. 6, 2017, thoughtco.com/remove-default-styling-with-master-sheet-3466871. Kyrnin, Jennifer. (2017, October 6). How to Remove Default Browser Styling With a Master Stylesheet. Retrieved from https://www.thoughtco.com/remove-default-styling-with-master-sheet-3466871 Kyrnin, Jennifer. "How to Remove Default Browser Styling With a Master Stylesheet." ThoughtCo. https://www.thoughtco.com/remove-default-styling-with-master-sheet-3466871 (accessed December 14, 2017).