The Benefits of Style Sheets
There are many reasons for using style sheets. The first is simply that HTML, XHTML and XML are not designed to be styling languages. HTML has, over time acquired some of its own styling elements, but most or deprecated. XML has no styling elements.
Standards recommend that style be separated from content. What follows is a list of reasons on why this separation makes sense.
You can change the appearance of your entire document by adjusting a few rules in a style sheet.
Style sheets control the layout for an entire document, or for each element in a document. Older HTML styling markup only operates on an element by element basis. HTML tags like <font> need to be placed and potentially nested, each time a font changes. Trying to find them all to change fonts throughout a document can be a challenge. Having all your style rules in one place means not searching the code for them.
Style sheets can be applied to multiple documents.
By using the same external style sheet in multiple documents, you can control your site layout from a centralized set of styling commands. This also means that you only need to change one document to get all pages using those style rules to change.
Pages and sites are easier to maintain.
Style sheets reduce the number of tags that need to be intermingled with the content of the page in order to format it properly. This makes pages easier to read. The reusability of the style sheets also reduces the overall amout of code in a Web site, making the entire site easier to maintain.
Stlye sheets can address multiple user agents.
HTML styling tools assume that the user is viewing the page on a color computer screen of at least a certain size. CSS allows you to write style rules specific to certain display devices, so that the page will be styled one way for color computer monitors, another way for printers, and yet another for text readers (voice browsers).
Documents download faster.
Using style sheets instead of HTML styling tricks reduces code. Using external style sheets means that the browser does not have to reload the styling code if it has already downloaded the style sheet for use recently for another document.
Because not all browsers correctly parse CSS code, developed coding techniques known as CSS hacks can either filter specific browsers or target specific browsers (generally both are known as CSS filters). The former can be defined as CSS filtering hacks and the later can be defined as CSS targeting hacks and both of which can be used to hide or show parts of the CSS to different browsers. This is achieved either by exploiting CSS-handling quirks or bugs in the browser, or by taking advantage of lack of support for parts of the CSS specifications.Using CSS filters, some designers have gone as far as delivering different CSS to certain browsers to ensure designs render as expected. Because very early web browsers were either completely incapable of handling CSS, or render CSS very poorly, designers today often routinely use CSS filters that completely prevent these browsers from accessing any of the CSS. Internet Explorer support for CSS began with IE 3.0 and increased progressively with each version. By 2008, the first Beta of Internet Explorer 8 offered support for CSS 2.1 in its best web standards mode.
An example of a well-known CSS browser bug is the Internet Explorer box model bug, where box widths are interpreted incorrectly in several versions of the browser, resulting in blocks that are too narrow when viewed in Internet Explorer, but correct in standards-compliant browsers. The bug can be avoided in Internet Explorer 6 by using the correct doctype in (X)HTML documents. CSS hacks and CSS filters are used to compensate for bugs such as this, just one of hundreds of CSS bugs that have been documented in various versions of Netscape, Mozilla Firefox, Opera, and Internet Explorer (including Internet Explorer 7).
Even when the availability of CSS-capable browsers made CSS a viable technology, the adoption of CSS was still held back by designers’ struggles with browsers’ incorrect CSS implementation and patchy CSS support. Even today, these problems continue to make the business of CSS design more complex and costly than it was intended to be, and cross-browser testing remains a necessity. Other reasons for continuing non-adoption of CSS are: its perceived complexity, authors’ lack of familiarity with CSS syntax and required techniques, poor support from authoring tools, the risks posed by inconsistency between browsers and the increased costs of testing.
Currently there is strong competition between Mozilla‘s Gecko layout engine used in Firefox, the WebKit layout engine used in Apple Safari and Google Chrome, the similar KHTML engine used in KDE‘s Konqueror browser, and Opera’s Presto layout engine—each of them is leading in different aspects of CSS. As of August 2009, Internet Explorer 8, Firefox 2 and 3 have reasonably complete levels of implementation of CSS 2.1.