Build a Master Stylesheet

An critical stylesheet roughly always is the initial stylesheet that calls in all the documents. When we use a master stylesheet it is to transparent out the default browser settings that can make problems in cross-browser Web design.
Once you’ve privileged out the styles with a master stylesheet, your design starts from the same place in all the browsers – like a purify board 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 physique of the request to 1 or 2 pixels indented from the browser mirror edges.
This creates certain that they all arrangement the same:

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

You also wish to make the rise consistent. Make certain we use font-family names that are customary on both Macintosh and Windows computers. Be certain to also set the rise distance to 100% or 1em, so that your page is accessible, though the distance is still consistent. And be certain to embody 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 confidant content with vast margins or stuffing around them. By clearing the weight, margins, and padding, we safeguard that these tags still sojourn incomparable (or smaller) than the content around them though carrying additional styles:

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

You competence wish to cruise environment specific sizes, letter-spacing, and paddings to your title tags, though we find that that unequivocally depends on the character of the site you’re conceptualizing and should be left out of the master character sheet.

Plain Text Formatting

Beyond headlines, there are other content tags that we should be certain to transparent out. One set that people mostly forget are the list dungeon tags (TH and TD) and form tags (SELECT, TEXTAREA, and INPUT). If we don’t set those to the same distance as your physique and divide text, we might be unpleasantly astounded during how the browsers describe 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 good to give your quotations (BLOCKQUOTE and Q), acronyms, and abbreviations a small additional style, so that they mount out a small more:

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

Then we should also conclude a distance for your SMALL and BIG tags so that you’re not astounded when we use them:

small {
font-size:.85em;
}
big {
font-size:1.2em;
}

Links and Images

Links are easy to manage. we cite to always have my links underlined, though if we cite it a opposite approach we can set these options separately. we also don’t embody colors in the master character sheet, since that depends on the design.

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

With images, it’s critical to spin off the borders. While many browsers don’t arrangement a limit around a plain image, when the picture is linked, the browsers spin on the border. To repair this:

img {
border: none;
}

Tables

We’ve already done certain that the default content distance is the same for your list cells, though there are a few other styles we should set, so that your tables stay the same:

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

Forms

Like with other elements, we should transparent out the margins and paddings around your forms. Another thing we like to do is rewrite the form tab as “inline” so that it doesn’t supplement additional space where we place the tab in the code. As with other content elements, we conclude the rise information for select, textarea, and submit adult 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 thought to change the cursor for your labels. This helps people to see that the tag will do something when they click it.

label {
cursor: pointer;
}

Common Classes

For this partial of the master stylesheet, we should conclude classes that make clarity to you. These are some of the classes we use many often. Note that they are not set to any sold element, so we can allot them to whatever we 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 breadth */
.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 since these classes are created before any other styles and they are only classes, they are easy to overrule with some-more specific character properties that start after in the cascade. If we find that we set a common category on an component and it doesn’t take effect, we should check to make certain that there is not some other character in one of your after stylesheets inspiring that same element.

The Entire Sytlesheet

/* Global Defaults */
html, physique {
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 breadth */
.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; }