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