Share style sheet for best results

A style sheet in the beginner's usually not so great, but after each knowledge grows, there is a danger that it expanded to become huge, and long, sometimes almost a meter scrolled. From a designers perspective, this is not just hard work, it is also reprehensible. Many also blame the browsers for that page is not behaving as it should - despite all the tricks validation. Why is it so, and most important - you can do something about it? Professional web designers know that managing style template for optimization and best results. We will here go through how you can help both to yourself as to the browser.

Let's say you have a stylesheet with a bunch of codes. You've probably also codes for a guestbook, comment feature, search forms, contact forms, etc. in addition to codes for all your divs, tables, text and links and the like. In order to provide the best optimization - and not to allow the presentation seem inconsistent in the various browsers, there are some tricks to exploit. We will divide the stylesheet in different segments so they become a style sheet for each one separately.

Therefore, start with creating a master sheet - that is a main style sheet. Name the suggestion to the default.css. This style sheet will not contain any codes, but it must import other style sheets that will link to the page. How many they will be is entirely dependent on how and what kind of presentation you want.

An important thing to consider, something not everyone knows about, is to "reset" all the codes that default value. In this way, you have eliminated all browser's default mode and can then build your presentation. Some choose to use starfloatkommande for html - but it's all about to reset the properties for just IE. We will however be reset to the global properties of all browsers and we do so by creating a style sheet that we christen the reset.css. This style sheet stuff we then set the following values that are good to reset (you can of course delete or add others):

1. html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, code, em, font, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tr, th, td {margin: 0; padding: 0; border: 0;}
2. ol, ul { list-style: none;}

So far we have two style sheets, if we count out the one we will share. We open default.css scheduled for the first import rule for reset.css. Default.css will then insert this code:

1. @import url("reset.css");

The next step is to remove your body global value and to do this we have a stylesheet we call global.css. This puts us into the global values that apply throughout the site such as links and body definitions.

1. body {background: #fff url(images/bg.jpg) left top no-repeat fixed;color: #333; margin: 0 auto; font: .75em verdana, Arial, Helvetica, Sans-Serif; line-height: 1;}
2. a, a:visited {color: #73AB02;text-decoration: none;}
3. a:hover, a:focus, a:active {color:#ccc;text-decoration: none;}
4. a img {border:none;}
5. p {line-height: 1.8em; text-align:left; margin: 0;}

Then it is time to incorporate global.css in default.css.

1. @import url("reset.css");
2. @import url("global.css");

So far, we have a default style sheet which is to link your stylesheets which both resets all global values (reset.css) and also keeps me in your global body which values have priority for the entire page (global.css). For each new style template you create, do not forget to remove the codes from the old template.

Next, create a style sheet, for example, called master.css that will be the best you work with. This puts you in the presentation of the layout structure, with more different divs. Then repeat the same procedure for style sheets that will take care of all your forms and / or comments or guestbook. Let's say you have created a style sheet for your records and messages including comments - name it post.css. Style sheet to take care of your forms call you rack for form.css. When you have divided up the old style template to these different segmented parts, we will bring all the default.css.

1. @import url("reset.css");
2. @import url("global.css");
3. @import url("master.css");
4. @import url("post.css");
5. @import url("form.css");

Be aware of the scheme. I put them in the order that is natural. First we reset the page via reset.css, then for me in my global-body values to be Priority of global.css, now we come to master.css because it is the "backbone" of the layout and style sheet, I most probably will work with. All messages and posts are connected then via post.css and as a last priority will form.css because this style sheet only contains the codes for my form. But is that enough? No! To make everything work, you need to change the link to your still no template. You can not use a traditional link and read very carefully now - the link must be inserted just before the / head. There should be no link between this code and / head.

1. <style type="text/css" media="Screen"> /*\*/@import url("http://dindomän.com/default.css");/**/ </style>

Want to see what css filter the different browsers, you may have read about this in centricle.com . So here I have put up my style sheets

Good luck!