| Style sheet is a progressive breakthrough for the | | | | network traffic and noticeably quicker page |
| advancement of web. Today, more and more | | | | downloads. |
| browsers are implementing style sheets, opening | | | | For example, the HTML element h2 specifies that the |
| authors' eyes to unique features that allow influence | | | | text contained within it is a level two heading. It has |
| over presentation while preserving platform | | | | a lower level of importance than h1 headings, but a |
| independence. The advantages of style sheets have | | | | higher level of importance than h3 headings. This |
| become - apparent -- and the disadvantage of | | | | aspect of the h2 element is structural . |
| continually creating more HTML tags -- galore -- for | | | | Customarily, headings are rendered in decreasing |
| presentation effects with the gradual development | | | | order of size, with h1 as the largest, because larger |
| of CSS. | | | | headings are usually interpreted to have greater |
| Let's understand CSS in the right perspective. | | | | importance than smaller ones. Headings are also |
| Style sheets in retrospect | | | | typically rendered in a bold font in order to give them |
| Style sheets have been around in one form or | | | | additional emphasis. The h2 element may be rendered |
| another since the beginnings of HTML in the early | | | | in bold face, and in a font larger than h3 but smaller |
| 1990s. | | | | than h1 . This aspect of the h2 element is |
| As the HTML language grew, however, it came to | | | | presentational . |
| encompass a wider variety of stylistic capabilities to | | | | Prior to CSS, document authors who wanted to |
| meet the demands of web developers . With such | | | | assign a specific color, font, size, or other |
| capabilities, style sheets became less important, and | | | | characteristic to all h2 headings had to use the HTML |
| an external language for the purposes of defining | | | | font element for each occurrence of that heading |
| style attributes was not widely accepted until the | | | | type. |
| development of CSS. | | | | Moreover, CSS can be used with XML, to allow such |
| Teething problems with implementation of CSS | | | | structured documents to be rendered with full |
| Many implementations of CSS are fraught with | | | | stylistic control over layout, typography, color, and so |
| inconsistencies, bugs and other Authors have | | | | forth in any suitable user agent or web browser. CSS |
| commonly had to use hacks and workarounds in | | | | has its share of inconsistencies as well |
| order to obtain consistent results across web | | | | CSS may at times be misused, particularly by the |
| browsers and platforms. | | | | author of web documents. Some developers who |
| One of the most well-known CSS bugs is the | | | | are accustomed to designing documents strictly in |
| Internet Explorer box model bug; box widths are | | | | HTML may overlook or ignore the enabling features |
| interpreted incorrectly in several versions of the | | | | of CSS. For instance, a document author who is |
| browser, resulting in blocks which appear as | | | | comfortable with HTML markup that mixes |
| expected in most browsers, but are too narrow | | | | presentation with structure may opt to use strictly |
| when viewed in Internet Explorer. The bug can be | | | | embedded CSS styles in all documents. While this |
| avoided, but not without some cost in terms of | | | | may be an improvement over using deprecated |
| functionality. | | | | HTML presentational markup, it suffers from some of |
| This is just one of hundreds of CSS bugs that have | | | | the same problems that mixed-markup HTML does; |
| been documented in various versions of Internet | | | | specifically, it entails a similar amount of document |
| Explorer,Netscape Mozilla , and Opera, many of which | | | | maintenance. |
| reduce the legibility of documents. The proliferation | | | | Discrepancies compared: CSS vs programming |
| of such bugs in CSS implementations has made it | | | | languages |
| difficult for designers to achieve a consistent | | | | CSS also shares some pitfalls common with |
| appearance across platforms. | | | | programming languages. In particular, the problem of |
| Currently there is strong competition between | | | | choosing appropriate names for CSS classes and |
| Mozilla's Gecko layout engine, Opera's Presto layout | | | | identifiers may afflict CSS authors. In the attempt to |
| engine, and the KHTML engine used in both Apple's | | | | choose descriptive names for CSS classes, authors |
| Safari and the Linux Konqueror browsers - each of | | | | might associate the class name with desired |
| them is leading in different aspects of CSS. Internet | | | | presentational attributes; for example, a CSS class to |
| Explorer remains the worst at rendering CSS by | | | | be applied to emphasized text might be named |
| standards set down by World Wide Web Consortium | | | | "bigred," implying that it is rendered in a large red |
| as of 2005. | | | | font. |
| Some breakthroughs ... | | | | While such a choice of naming may be intuitive to the |
| These problems have preisely led the W3C to revise | | | | document author, it can cause problems if the author |
| the CSS2 standard into CSS2.1, which may be | | | | later decides that the emphasized text should instead |
| regarded as something of a working snapshot of | | | | be green; the author is left with a CSS class called |
| current CSS support. CSS2 properties which no | | | | "bigred" that describes something that is green. In |
| browser had successfully implemented were dropped, | | | | this instance, a more appropriate class name might |
| and in a few cases, defined behaviours were | | | | have been "emphasized," to better describe the |
| changed to bring the standard into line with the | | | | purpose or intent of the class, rather than the |
| predominant existing implementations.. | | | | appearance of elements of that class. |
| What makes style sheets significant enough? | | | | In a programming language, such a misuse might be |
| Style sheet represents an enormous step forward | | | | analogous to using a variable name "five" for a |
| for the Web. With the separation of content and | | | | variable which contains the value 5; however, if the |
| presentation between HTML and style sheets, the | | | | value of the variable changes to 7, the name is no |
| Web no longer needs to drift away from the strong | | | | longer appropriate. |
| ideal of platform independence that provided the | | | | CSS in a nutshell |
| medium with its initial push of popularity. Authors can | | | | CSS is used by both the authors and readers of web |
| finally influence the presentation of documents | | | | pages to define colors, fonts, layout, and other |
| without leaving pages unreadable to users | | | | aspects of document presentation. It is designed |
| A style sheet is made up of style rules that tell a | | | | primarily to enable the separation of document |
| browser how to present a document. There are | | | | structure (written in HTML or a similar markup |
| various ways of linking these style rules to your | | | | language) from document presentation (written in |
| HTML documents, but the simplest method for | | | | CSS). |
| starting out is to use HTML's STYLE element. This | | | | This separation provides a number of benefits, |
| element is placed in the document HEAD, and it | | | | including improved content accessibility, greater |
| contains the style rules for the page. | | | | flexibility and control in the specification of |
| Functionality and Usage of CSS | | | | presentational characteristics, and reduced complexity |
| CSS is well-designed to allow the separation of | | | | of the structural content. CSS is also capable of |
| presentation and structure. Prior to CSS, nearly all of | | | | controlling the document's style separately in |
| the presentational attributes of an HTML document | | | | alternative rendering methods, such as on-screen in |
| were contained within the HTML code; all font colors, | | | | print, by voice (when read out by a speech-based |
| background styles, element alignments, borders and | | | | browser or screen reader) and on braille based, tactile |
| sizes had to be explicitly described, often repeatedly, | | | | devices. |
| in the midst of the HTML code. | | | | CSS allows complete and total control over the style |
| CSS allows authors to move much of that | | | | of a hypertext document. The only way this can be |
| information to a stylesheet, resulting in considerably | | | | illustrated in a way that gets people excited is by |
| simpler HTML code. The HTML documents become | | | | demonstrating what it can truly be, once the reins |
| much smaller and web browsers will usually cache | | | | are placed in the hands of those able to create |
| sites' CSS stylesheets. This leads to a reduction in | | | | beauty from structure. |