CSS is one of the basic building blocks of a website. Earlier styling was done within your HTML pages but now it could be done separately. If you embed style tags in your HTML pages and not use it separately the size of your HTML page is nearly 4 times higher than a normal HTML page which uses HTML, only to structure contents. These are some of the best practices that you should follow in developing a clean website.
1. Write separate CSS one targeting all w3c compatible browsers and another for IE 6 and IE 7 browsers. As and when you write CSS for all w3c compatible browsers, check for CSS issues in all IE versions. If your CSS is perfect enough it will also work in all IE versions with minimal changes.
2. Try validating your CSS as and when you develop CSS. You can validate your CSS using the online tool provided by W3.Org.
3. Whenever you start doing CSS try to zero out all margins and padding’s. Each browser adds its own browser specific margins and padding’s to the new DIVs created. If you do not zero out margins and padding’s the webpage might look different in different browsers.
* { margin: 0; Padding: 0; }4. Always start writing CSS providing the correct DOCTYPE. If you do not provide the correct DOCTYPE the browser gets into to a mode called quirk mode. If you are using HTML provide the corresponding HTML DOCTYPE and if you are using XHTML provide the corresponding XHTML DOCTYPE.
HTML DOCTYPE
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML DOCTYPE
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5. Come to conclusion whether you will be opting for HTML or XHTML. If you are planning to use HTML see to it that you only use HTML tags and do not mix up with XHTML tags.
XHTML tags and tag attributes should not be in uppercase but whereas if you use HTML, using the tag <BODY> is perfectly valid and is invalid in XHTML. Further if using XHTML all tags must be closed which is an exception for certain tags in HTML.
Finally if providing a link in XHTML using HREF tags, always remember to enclose the link in double quotes.
Eg. <a href = your link here> is perfectly valid in HTML but invalid in XHTML.
In XHTML you will have to give it as <a href = “your link here”>
6. Disable the IE-8 compatibility mode by providing the IE-8 compatibility mode tag.
Meta http equiv = “X-UA-compatible” content = “IE=edge” />.7. If you are using scroll panes to any DIV it might not be visible in IE. To make it visible in IE provide the tag overflow: visible. However this property is not required for all W3C compatible browsers.
8. When you use float: left to any DIV, IE-6 automatically adds up some extra margin to the DIV thus by making the DIV positioning look different in IE-6 than the rest of the browsers. This is because of, IE-6 double floated margin bug. This can be avoided by adding an extra line display: inline to the necessary DIV which is floated left.
9. Remember min-height and max-height, min-width, max-width do not work in IE. But however there are some alternative hacks with which this could be achieved.
10. When you give margin-left: auto and margin-right: auto to any DIV, the DIV gets centered. But unfortunately the DIV do not get centered in IE-6 browsers. To align the DIV to center position you should also give text-align: center.
.container left {
margin-left: auto;
margin-right: auto;
text-align: center;
}11. If you want two separate DIVS to get aligned next to the other give float: left to both DIVs.
12. Finally always target your CSS for a lower resolution say 800*600. If your web-page works fine for lower resolutions it will also work fine for higher resolutions.
Social Networking