I’m going to share that how to write CSS in perfection. This is explained version of CSS found to be very useful. Below is a list of tips to become a master in CSS:
ORGANIZE WELL
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 {}
SHORT IS ADVANTAGE
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
dedicated hosting costs, if you have to pay per gigabyte downloaded).
COMBINE, COMPRESS AND CONSOLIDATE
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.
STYLE SHEET PERFECTION
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:
Base style sheet
/* 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:
1. The use of the margin shorthand; although in each case margin: 0em 0% 0em 0% is expressable as margin: 0, I specify it like this to emphasize two things: firstly that you should specify vertical margins in ems and horizontal margins in %, and secondly that each side can be specified. The order is top right bottom left - margin: 0 5% 0 7% gives a left margin of 7%, top and bottom margins of 0, and a right margin of 5%. If you wish, you may change them all to margin: 0, but I find that it acts as a useful reminder.
2. The font declarations at the top; this should be set to the values you prefer - the declaration is setting the font family and size for the document. It is set like this to avoid the possibility of browsers applying their own defaults on any element.
The use of the font shorthand; this allows fonts' boldness, variant (i.e., small-caps or not), italicity, size, line height and typeface to be specified.
3. The typeface and size are both required; for example, font: 16px Arial is valid, but font: 16px is not. If line height is specified, it must follow the size separated by a / - e.g., font: 2em/1 sans-serif, which specifies a font size equal to twice that of the parent element and a line height equal to the font size, in a sans serif font. If bold, small-caps or italic is specified, they must come before the size - font: italic 16px Arial is valid, but font: 16px bold Arial is not.
4. You should not alter HTML's ruleset - it is likely to cause problems if you do; its official status with regard to backgrounds, etc., is poorly established, and its use is to be avoided.
Style sheet design checklist
Here is your style sheet design checklist:
1. Use shorthand properties where possible.
2. Avoid grouping elements unless all the elements have exactly the same styles (e.g., avoid H1, H2 {x} H1 {y} H2 {z}., but o.k. is H1, H2 {x}).
3. Always keep all declarations relating to an individual element in the same place.
4. Remove all useless declarations (such as font-style: normal).
5. Always declare margin on every block element.
6. Evaluate each declaration - does it have any useful effect?
7. Always use capital letters for the element_name in selectors - P, not p.
8. Separate into sections - elements, classes and ids, making sure that the elements are first.
9. Sort each section into alphabetical order.
10. Try adopting the compact but attractive and easy-to-read layout style of:
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.
11. Try to always include the type selector when using classes (i.e., P.copyrightnotice, not .copyrightnotice) so that your classes are self-documenting (N.B. this doesn't apply to ids, since they don't work in Netscape or Internet Explorer when it is included).
12. Always use descriptive identifiers and elements that fit the content - bad is SPAN.pink {color: pink}, good is STRONG.attentiongrabber {font-weight: normal; color: pink}. As a reminder of what each element is used for, here's a list of the inline elements and their uses:
ABBR - Abbreviations
Acronym - Marking acronyms - IE 4 & 5 and Mozilla 5 only
CITE - Marks citations
Code - An instance of computer code
Dfn - Definitions
Em - Emphasis
KBD - Keyboard input
Q - An inline quotation
Samp - Sample output
Span - Anything not covered by these other elements
Strong - Strong emphasis
Var -A variable
And here's the block elements and their uses:
ADDRESS - Used for marking up addresses
BLOCKQUOTE - Block-level quotations
DD - Definition description; can only be used inside a DL; should follow the term that it is describing
DIV - Used for making logical divisions for styling purposes
DL - Definition list - container for DT and DD
DT - Definition term - term to be defined; can only be used inside a DL
H1 - Heading, level 1
H2 - Heading, level 2
H3 - Heading, level 3
H4 - Heading, level 4
H5 - Heading, level 5
H6 - Heading, level 6
LI - List item; can only occur inside OL or UL
OL - Ordered list; signifies that the LI that occur inside it should be numbered
P - Paragraph
PRE - Preformatted text (i.e., text in which the spacing is preserved)
UL - Unordered list; signifies that the LI that occur inside it should not be numbered
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.
HTML DESIGN PRINCIPLES
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>
The text after the heading.
<P>
Some more text
<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.
source:richinstyle.com
Subscribe to TutorialFeed via RSS
