|
||||||||
|
Tip 3 - combine, compress and consolidate
Tip 4 - Style sheet perfection
One of the most important factors in effective style sheet design is effective organization - it is a bad idea to separate styles into different sections: for example, into separate sections for fonts, margins and colors.
You should organize your style sheet by separating your rulesets into those that specify the
formatting of elements (e.g., H1 {color: red}), those that specify the formatting of classes (e.g.,
P.copyrightnotice {color: red} or .left P {margin-top: 1em}), and those that specify
the formatting of ids (e.g., #main {width: 60%}).
You should then place each section in alphabetical order.
You will now have a style sheet that looks something like this:
/* Elements */
A:link {}
ADDRESS {}
BODY {}
DIV {}
H1 {}
H2 {}
H3 {}
H4 {}
LI {}
OL {}
P {}
UL {}
/* Classes */
A.offsite:link {}
P.introduction {}
/* IDs */
DIV#body {}
Above all else, the most important factor in writing effective style sheets is brevity - try to get rid of the superfluous garbage that clutters up your style sheet.
Here is an example of what I mean:
BODY {font-variant: normal;
font-stretch: none;
letter-spacing: normal;
word-spacing: normal;
text-decoration: none}
H1 {text-decoration: none;
font-style: normal}
This kind of thing is indicative of a bloated style sheet - no style sheet-supporting browser has any text-decoration on any element other than <A>, so text-decoration: none on BODY has no effect whatsoever, and neither does it have an effect on H1. Equally, all the other declarations here are totally useless, and are serving no purpose except to increase download times for viewers of your page.
Therefore, to improve your site at a stroke, cut all this garbage out of your style sheet, and just watch those download times plummet (and hosting costs, if you have to pay per gigabyte downloaded).
The next thing to do is to try to consolidate your style sheet by considering whether you really want all the styles that you have, and also by combining styles.
However, it is a bad idea to group elements (as in H1, H2 {...}), since this tends to complicate style sheets. Here's some examples:
A:active {
color: #FFFF66;
background: #9966CC;
}
Becomes:
A:active {color: #FF6; /* Each digit is repeated, so this is the same as FF FF 66 */ background: #96c}
And:
BLOCKQUOTE {
border-style : solid;
border-width : 1px;
font-style : italic;
line-height : 1.58em;
margin-bottom : .75em;
margin-left : .58em;
margin-right : 1.3em;
margin-top : .75em;
padding : .3em;
border-color: #c06565;
}
Becomes:
BLOCKQUOTE {border: 1px solid #c06565;
font-style: italic;
line-height : 1.58em;
margin: .75em 1.3em .75em .58em}
With:
H1,H2,H3,H4,H5,H6 {
font-style : normal;
line-height : 1.33em;
margin-bottom : .33em;
text-decoration : none;
font-family: "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial,
Impact, sans-serif
}
H1, H2 {
margin-left: -7%;
}
H3, H4, H5 {
margin-left: -3%;
}
H6 {
margin-left: -1%
}
H1, H2, H3, H4, H5, H6 {
color: #66CCCC;
}
H1 {
font-size : 2em;
margin-top : 1.33em;
}
H2 {
font-size : 1.75em;
margin-top : 1.3em;
}
H3 {
font-size : 1.58em;
margin-top : 1.3em;
}
H4 {
font-size : 1.24em;
margin-top : 1.24em;
}
H5 {
font-size : 1.17em;
margin-top : 1.17em;
}
H6 {
font-size : 1em;
margin-top : 1em;
}
Becoming:
H1 {font: 2em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial,
Impact, sans-serif;
margin: 1.3em 0 .33em -7%;
color: #6CC}
H2 {font: 1.75em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact,
sans-serif;
margin: 1.3em 0 .33em -7%;
color: #6CC}
H3 {font: 1.58em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact,
sans-serif;
margin: 1.3em 0 .33em -3%;
color: #6CC}
H4 {font: 1.24em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact,
sans-serif;
margin: 1.24em 0 .33em -3%;
color: #6CC}
H5 {font: 1.17em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact,
sans-serif;
margin: 1.17em 0 .33em -3%;
color: #6CC}
H6 {font: 1em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact,
sans-serif;
margin: 1em 0 .33em -3%;
color: #6CC}
The importance of doing this cannot be overstated - it will improve download times, improve maintainability by making it easier to spot bugs, and it will make it easier to use browser detection or browser avoidance techniques because there is less to change.
The next thing to consider is that your style sheet should contain all of the declarations below (i.e., each and every block element must have declarations for margin, padding and line height, and CODE, BODY, PRE and CODE also require font size and family), although not necessarily the same values.
It is vitally important that you do this - if you fail to, it is inevitable that some users will encounter problems when viewing your page (the number of pages that I have had problems with as a result of the authors not following these simple principles grows ever greater).
If you are designing a style sheet from scratch, you should start with the style sheet below. This will ensure that no conflicts or differences will occur, whatever browser you use. If you are not starting from scratch, simply ensure that your style sheet includes these declarations (not necessarily these values) on each element:
/* Elements */
/* Fonts - change 'sans-serif' to your preferred font */
ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, H1, H2, H3, H4, H5, H6, MENU, OL, P, TD, TH, UL {font-size: 1em;
font-family: sans-serif}
/* Real styles */
A {cursor: auto}
A:link {color: blue;
background: transparent;
text-decoration: none}
A:visited {color: red;
background: transparent;
text-decoration: none}
A:active {color: green;
background: transparent;
text-decoration: none}
A:hover {text-decoration: underline}
ADDRESS {margin: 0em 0% 0em 0%;
font: italic 1em/1 sans-serif}
BIG {font-size: 1em}
BLOCKQUOTE {margin: 0em 0% 0em 0%;
line-height: 1}
BODY {margin: 0em 0% 0em 0%;
font: 1em/1 sans-serif;
background: white;
cursor: default}
BUTTON {cursor: auto}
CAPTION {margin: 0em 0% 0em 0%;
line-height: 1}
CODE {font-size: 1em;
font-family: monospace} /* To avoid overriding boldness/italicity by using font */
DIV {margin: 0em 0% 0em 0%;
line-height: 1}
DD {margin: 0em 0% 0em 0%;
line-height: 1}
DL {margin: 0em 0% 0em 0%}
DT {margin: 0em 0% 0em 0%;
line-height: 1}
H1 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H2 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H3 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H4 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H5 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
H6 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}
HR {margin: 0em 0% 0em 0%}
HTML {margin: 0;
background: white}
INPUT {cursor: auto}
KBD {font: 1em monospace}
LI {margin: 0em 0% 0em 0%;
line-height: 1}
OL {margin: 0em 0% 0em 5%;
list-style: decimal}
UL UL OL OL, UL OL UL OL, OL UL OL OL, OL OL UL OL, OL UL OL, OL OL {list-style: lower-alpha}
OL UL OL OL, OL OL UL OL, UL OL OL OL, OL OL OL {list-style: lower-roman}
OL OL OL OL {list-style: decimal}
P {margin: 0em 0% 0em 0%;
line-height: 1}
PRE {margin: 0em 0% 0em 0%;
font: 1em/1 monospace}
SAMP {font: 1em monospace}
SMALL {font-size: 1em}
SUB {font-size: 1em}
SUP {font-size: 1em}
TD {line-height: 1}
TEXTAREA {cursor: text}
TH {font: bold 1em/1 sans-serif}
TT {font: 1em monospace}
UL {margin: 0em 0% 0em 5%;
list-style: disc}
UL UL, OL OL UL UL, OL UL OL UL, UL OL OL UL, OL UL UL, UL OL UL {list-style: circle}
OL UL UL UL, UL OL UL UL, UL UL OL UL, UL UL UL {list-style: square}
UL UL UL UL {list-style: disc}
Set this up as your style sheet, and test it on your pages using IE 5 or Opera (Netscape 4.* is no use because it is too buggy; Internet Explorer 4 is tolerable, but is buggy on margin %).
There is no chance whatsoever that this base style sheet will produce what you want, but what it does do is force you to make style decisions for each element - although taking an approach that doesn't specify every style on every element might look o.k. in the browser that you are using, a different browser with different default settings might have it looking differently. The point of it is to make sure everything looks exactly correct when your users come to view the page - if you specify every relevant property, then there is no chance for problems.
To give an example, I was looking at a page that set margins on BODY but not on H1-6. In my user style sheet, I set margins on BODY and H1-6. The H1-6 had negative margin-lefts set that were designed to fit the margin I had on BODY. Since the page set margins on BODY, my BODY's margins were overridden, but since H1-6 were not set, the result (since the page had much smaller margins on BODY than I did) was that that part of the page's headings were obscured.
As a result, it is important that you never remove any of the declarations in the template - only alter them. This will ensure that there is consistency whoever is reading your page. It is also important to note that even though you might never use DT (or whatever), you should still keep its ruleset, since if you use it in future, you will then be forced into styling it appropriately.
In addition, you should not attempt to consolidate rulesets (e.g., by having H1, H2), since this tends to cause confusion. Furthermore, you should not mix classes in with the the element rulesets, but you should have them at the end of the style sheet.
There are a few points of note about the style sheet itself:
Here is your style sheet design checklist:
P {declaration: value;
declaration: value;
declaration: value}
Notice how compact this is. This is a definite advantage because it makes style sheets much easier to read, and makes it far easier to spot problems.
If you have followed this checklist successfully, the most complex style sheet will not exceed 3k for its elements (i.e., excluding classes and ids), and if it does, it is almost always a sign of poor design.
It is important that your HTML is of reasonably high quality; for example, you should always think in terms of elements, not tags. E.g.:
<BODY>
<H1>
A heading
</H1>
The text after the heading.
<P>
Some more text
<P>
And some more.
This in an example of bad HTML, since 'The text after the heading' is not part of a P element, and therefore cannot be styled using the P selector. Better would be:
<BODY>
<H1>
A heading
</H1>
<P>
The text after the heading.
<P>
Some more text
<P>
And some more.
This is better since every paragraph is now enclosed by a P element. If there is too much space between H1 and P, simply adjust H1's margin-bottom.
The next major point to consider is how you markup special text.
You should always do this with an element that is designed for the purpose; failing which, you should use SPAN or DIV with a class. In addition, most importantly of all, you should never use <FONT> tags.
After this, the first of RichInStyle.com's master classes, chances are that your style sheet will not look like you want it to. This is intended, and is designed to demonstrate to you that you must set everything yourself to avoid problems in other people's browsers. You should not worry about this, since the rest of this master class is concerned with deciding the best value for each property.
To continue to the next section, which deals with style sheets and older (i.e., non-CSS supporting) browsers, click here.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.