Using style sheets Web Designing

Like their counterparts in desktop publishing page-layout programs, style sheets in HTML allow authors to apply typographic styles and spacing instructions for elements on a page. The word cascading refers to what happens when several sources of style information vie for control of the elements on a page -- style information is passed down from higher-level style sheets (and from parent to child element within a document) until it is overridden by a style command with more weight.

This comes as good news both for designers who want more control over presentation and for HTML purists who stand by the principle that style should be separate from content and structure. Style sheets make both these dreams possible, but it is important to be aware of their advantages and disadvantages.

Style sheets offer the following advantages to web designers:

  • Greater typography and page layout controls. With style sheets, you can specify traditional typography attributes such as font size, line spacing, and letter spacing. Style sheets also offer methods for specifying indents, margins, and element positioning, and they even use terminology from traditional and desktop publishing, such as points and em spaces.
  • Style is separate from structure. HTML is designed for indicating the structure of a document, to which presentation is applied by the end user's browsing device. Over recent years, however, HTML has been extended to provide greater control over presentation (the <font> tag being the most infamous example). Style sheets, when done correctly, mark the return to the original intent of HTML by removing presentation instructions from HTML and placing them in a separate, optional area.
  • Potentially smaller documents. Placing font specifications once at the beginning of the document instead of using a <font> description for every individual element can drastically cut down on the number of characters in the document, thus reducing its file size. As always with the Web, it is desirable to keep file sizes (and download times) as small as possible.
  • Easier site maintenance. It is possible to link multiple HTML pages to a single style sheet, which means not only can you make one change that affects every instance of that element on a single HTML page, but you can also make style changes to hundreds or thousands of web pages by editing a single file.
  • It's easy to learn. Creating basic style sheets is no more difficult than tagging documents, once you learn the syntax rules. To make the job even easier, style sheet functions are now built into web authoring tools like Macromedia Dreamweaver and Adobe GoLive.

As of this writing, the sole drawback to implementing style sheets remains uneven browser support. First, style sheet information is not supported in browser versions earlier than Microsoft Internet Explorer 3.0 or Netscape Navigator 4.0. That is not as frustrating as the inconsistency of support among browsers and versions that claim they do support CSS.

The World Wide Web Consortium first published its recommendation for style sheets in 1996, and they were first implemented by Internet Explorer 3.0. Since then, as usual, Microsoft and Netscape have chosen diverging paths in the properties their browsers support and the way those properties are presented.

The good news is that the outlook continues to improve with the release of standards compliant browsers and as older versions fade away. Internet Explorer 5.5 and higher and Netscape 6 claim to support almost all of the CSS Level 1 specification and parts of CSS Level 2 (the latest version as of this writing). With an estimated 95% of web users surfing with 4.0 or higher version browsers, you can safely assume that basic styles (font, size, and color, for example) will reach the vast majority of your audience.

Strategies for Using Style Sheets Today
Although consistent browser support for style sheets remains a large issue, that does not mean that you should abandon them completely. In fact, many large commercial and consumer-oriented sites are taking advantage of the power of style sheets today. Here are a few strategies for adding styles to your site:

  • Include end tags. While current browsers don't mind if you leave off the </p> or </li> tag, style sheets (and other web technologies such as XML) do mind. It is necessary to have clearly defined text elements, including both tags. If you think you may be adding style sheet functionality to your site in the future, get ready by closing all your tags today.
  • Use style sheets as "icing." One way to create a site that degrades well to any browser is to first create a site free of style sheets that is acceptable on all browser and platform configurations. Once you are happy with it, add style sheet information that will not affect the display in older browsers (such as <div> and <span>, and the class attribute). Choosing properties that are fully supported by the major browsers will broaden the chances your design will be seen as you intend it.
  • Serve different styles to different browsers. Another approach is to develop two versions of your site and deliver the proper version using a browser-detect JavaScript. You might have a fully-styled version that is aimed at the standards compliant browsers (Internet Explorer 5.5+, Netscape 6, and Opera5) and another "vanilla" version that is stable without style sheets for everyone else. Since Navigator 4.x is particularly buggy, you can hold back certain style information from it using the @import method of style sheet application (which Navigator 4 does not support) along with or instead of <link>.
  • Use style sheets for intranets. If you have the good fortune to be designing a site for which you know the exact browser/platform configuration for all your users (such as a corporate intranet or a self-contained kiosk display), feel free to use the supported style sheets to their limits.

The Future of Style Sheets
Despite a bumpy start, style sheets still hold great promise as the preferred method for specifying page presentation. The Web Standards Organization, an industry watchdog group that educates the web community on the importance of standards, urges web authors and developers to begin using style sheets right away. Kiss your <font> tag goodbye!

In 1998, the W3C published its second style sheet proposal (CSS Level 2, or CSS2), which includes additional properties and advanced methods for absolute positioning that could make tables and frames as layout devices a thing of the past. Style sheets are also a key component to programming dynamic effects with DHTML. CSS Level 3 is already being considered.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Web Designing Topics