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