In 1989, Tim Berners-Lee proposed a global hypertext project which became the basis of the World Wide Web.

As the WWW became a major mechanism for sharing information, graphic artists found it difficult to create visually interesting sites. They demanded and received HTML tags (such as the font tag, the center tag and the b and i tags) whose sole purpose was to control presentation in a Web page. In addition, they formatted Web pages by misused HTML tags intended to display data -- a common technique involved using the table tag to divide a page into content areas and then using nested tables to format subsections of a page. Designers also "pushed" local sections of a page into a desired position by using a string of non-breaking spaces or a row or column of 1 pixel square transparent .gifs. By the mid- to late 1990s, 60% to 80% of the mark-up for a page existed solely to style that page, and since the styles were applied directly to the page content, they needed to be repeated on every page of a site.

The proliferation of tags and techniques used solely for formatting content did more than simply increase the size of HTML files (and therefore their download times). It also increased the cost and development time for sites, as the code for each Web page took significantly longer to write, test, and debug. And to complicate matters further, it was during this time the major browser manufacturers competed to introduce a number of non-standard HTML tags and attributes, hoping to entice graphic artists to use their platform exclusively.

The exuberance of styling information within Web pages also created problems for systems that tried to interpret the content of a pages automatically. Screen readers couldn't tell whether a table was being used to display data or simply to format the page, and few search engines dared to venture into the body of a page to index page contents.

In response to these difficulties, the World Wide Web Consortium (W3C) made the separation of content and presentation the core objective in defining Web Standards. In 1996, the W3C proposed Cascading Style Sheets as the preferred way to format Web pages, and in 2001 they recommended that an XML based language, XHTML, replace HTML. They have deprecated frames as well as HTML tags and attributes that were used only to format page contents (such as font and center) and have recommended against using tables to format Web pages.

Why use CSS?

 

  • CSS has been a core component of Web Standards for more than ten years.
  • CSS allows more control over styling and positioning than HTML does. This page is styled exclusively with CSS -- including all text styles and the styling and positioning of the call-out boxes.
  • CSS can be used to format a Web page separately for a wide range of user agents, including monitors and printers (of course), but also PDAs, Web-enabled cell phones, and screen readers. (This site, for instance, uses separate style sheets to format pages for monitors and printers -- use the print preview link on your browser to see the differences between the two versions of this page's XHTML file.)
  • CSS makes it easier to create assessable Web sites.
  • CSS reduces the file size of each Web page, which translates to faster download times.
  • CSS is cost effective as it:
    • is easy to update. In order to change the color of, say, an h2 heading, you can simply make one change in a style sheet, instead of changing all h2 tags on every page of a site.
    • allows faster site development, as less code needs to be generated.
    • can be validated using free validation services, which reduces debugging time.

CSS Today

Today CSS is used widely -- although not exclusively -- to format HTML 4.01, XHTML and XML documents. Like other Web languages, the recommendations for CSS have been refined and expanded over the years.

The initial version of CSS, CSS1, was introduced in 1996 and recommended styles for fonts, text, background and foreground colors for elements, controls for background images, and styles for controlling the margins, borders and padding of block-level elements, as well as for floating block-level elements. All modern browsers support CSS1.

CSS2, which was introduced in 1998, added styles to control positioning (sometimes called CSS-P) and visual formatting (clipping and hiding elements), as well as styles to format output for different media and to control the appearance and behavior of features such as scrollbars and mouse cursors. CSS2 is widely supported by modern browsers, although Microsoft's Internet Explorer 6 only partly supports it. Microsoft's IE 7 provides (almost) full support for CSS2.

CSS3 is still a work in progress, with recommendations that will enable styling of dynamic user interfaces, output for mobile devices, scalable vector graphics, and more. Several of the component recommendations are nearly ready for publication, and a few browsers, such as Opera, have begun to support some of the draft recommendations.

As with other aspects of Web design, it is important to understand which browsers will not support the tools you wish to use. Dreamweaver provides an O'Reilly Reference Manual for CSS (we will see this later in the tutorial) which includes information about support for each of the CSS properties.

* click the link below to read the next tutorial *
Overview of CSS