Blog

Reset browser specific inbuilt style sheets

  • Post author:
  • Post category:CSS
  • Post comments:0 Comments

All browsers have their own inbuilt style sheets and this can interfere with the look that you’re trying to create from browser to browser. We can download this code and add it to the very top of your own style sheet. This resets the stylesheet of any browser the page is being viewed on so that you’re down design will look as you wish on all browsers.

So now our CSS looks like this. Remembers, as a style sheet is read from the top down, this must be added at the very top of the sheet.

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

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 colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours 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 colour 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;
}


/* Begin of my style sheet */
h2 {
  color: blue;
  font-size: 40px;
  margin: 50px; /* margin of 50px around h2 text */
  background-color: yellow; /* yellow background */
  text-align: center; /* center the text */
}
p {
  color: #55CC77;
  background-color: rgb(120,20,56);
}
h3 {
  color: pink;
  font-size: 20px;
  margin: 0px;
  background-color: blue;
}

.holiday_break_title {
  color: black;
  font-size: 20px;
  margin: 0px;
  background-color: orange;
}

A much neater way of handling this is to import 2 css files. If we save the code into a new style sheet and call it browser-reset.css, we can then change our HTML file to download this stylesheet first and then our style sheet. This will prevent us being confused with all that added code at the beginning of the style sheet that we are working on.

So below is how we change the HTML code in our header to include both style sheets.

 <link rel="stylesheet" a href="browser-reset.css">
 <link rel="stylesheet" a href="style.css">

Leave a Reply