SELFHTML

CSS Style Sheets and HTML

Informationsseite

nach unten The purpose of CSS Style Sheets
nach unten Style sheet languages, versions and further information
nach unten Style sheets, web browsers and users
nach unten CSS formats and CSS properties

 nach unten 

The purpose of CSS Style Sheets

CSS Style Sheets are a direct supplement to HTML. The CSS language is used to define the format and properties of HTML elements. You can use style sheets, for example, to define that headlines of the first level must have a font size of 18 point, use the font type Helvetica, but that they must not be bold, and that the distance between the headline and the following paragraph must be 1.75 centimeters. In pure HTML, definitions of this kind are not possible.

But this is only the beginning. Style sheets offer many other possibilities. You can add a background color, a background image (wallpaper), and different borders to many HTML elements - e.g. to paragraphs, lists, table cells, or forms. You can define the exact position of elements in the browser window. For print layouts, CSS offers many possibilities to define a page layout and to control text flow. There is a wide range of commands to control the acoustic rendering of web sites by speech devices. There are some CSS properties you can use to determine the look of the browser window, e.g. the shape of the cursor. And finally, there are specific filters (Microsoft only) for rendering normal text with graphic effects, similar to some effects known from programs like Photoshop.

Another important feature of CSS is that you can define central formats. This allows you to write into the head of your HTML file a central definition, e.g. for the rendering of table cells. This central definition is then used for all table cells in that HTML file. This simplifies the task of writing code and makes HTML files smaller. You can even write down your style sheet definitions in separate files. These style sheet files can be referenced from as many different HTML files as you want. By using this method, you can design standard layouts for large projects. With only a few small changes in your central style sheet file, you can change the look of hundreds of HTML pages.

By offering all these features, CSS Style Sheets support professional web design and help you develop a corporate design for a large project or for a company.

 nach obennach unten 

Style sheet languages, versions and further information

Just like HTML, the CSS language is defined by the World Wide Web Consortium (W3C). CSS is an openly documented standard, freely available and independent of individual companies. Just like HTML, the CSS language is administered by a Working Group at the W3 Consortium. This Working Group takes care of the development of the language. It works in accordance with the rules and regulations for developing official W3C recommendations.

Just as in HTML, there are different versions of the CSS language, based on the revisions of the W3C recommendations. CSS version 1.0 was first published in 1996 and revised in 1999. In 1998, CSS version 2.0 reached recommendation status. Meanwhile, version 3.0 is being developed. This documentation covers the first two CSS versions. The following symbols are used to identify these versions:

Symbol Meaning
CSS 1.0 part of CSS version 1.0
CSS 2.0 part of CSS version 2.0

There are several languages for defining style sheets, CSS is only one of these languages. But CSS was specifically created as a supplement to HTML, and it's optimized for use in HTML-based websites. CSS stands for "Cascading Style Sheets". Other languages are the "Document Style Semantics and Specification Language" (DSSSL), which is designed for SGML and, like SGML, is quite "sophisticated", and the fairly well-known "Extensible Stylesheet Language" (XSL), which was developed as a formatting language for XML (on XSL see also Kapitel Presentation of XML-Data).

To read more about the history and the current development of CSS on the web, visit the W3C's web site:

englischsprachige Seite Style sheets main page at the W3C web site
This page provides access to information about CSS, XSL and DSSSL, and also about related software projects.

englischsprachige Seite CSS main page at the W3C web site
This page leads you to current news and information about CSS.

 nach obennach unten 

Style sheets, web browsers and users

Netscape 4.x interprets many properties in CSS version 1.0 and some of the properties in CSS version 2.0. The MS Internet Explorer 3.0, released in 1996, already knew a large part of CSS version 1.0. In its version 4.0, the Internet Explorer interprets some of the properties in CSS version 2.0 plus several specific properties introduced by Microsoft. However, the implementation of CSS at the 4th generation level of both browsers is still incomplete and varies considerably. Particularly in Netscape 4.x, there are some hair-raising errors. This situation has improved since the releases of Internet Explorer 5 and Netscape 6. The web browser Opera has also reached a high level of CSS implementation since its version 5. But still, up to the present there is no complete implementation of CSS 2.0 in any of the leading web browsers.

Due to this situation, while designing styles for your web sites, you need to test your format definitions with different browsers. The CSS implementation in the various browsers is just not homogeneous enough yet, and results in other browsers may differ considerably from the presentation in your favourite browser. Further, you should be aware that the visual effect of a web site depends strongly on the hardware used by your visitors. Web sites are not viewed exclusively on the latest PCs with 19"-Monitors and 16.7 million colors. They are also viewed on notebooks and handheld computers and displayed on outdated PCs. Particularly the different monitor technologies which are available today provide for a wide variation in the rendering of colors. Something that looks beige on one monitor may look piggy-pink on another. Certainly, monitors can be calibrated, but you can hardly ask your visitors to adjust their monitors before looking at your web site. Since CSS 2.0 it has become possible to define specific CSS formats for different media, but still this does not solve all rendering problems.

Further difficulties are caused by the fact that font size definitions in CSS do not always lead to identical results on the screen. While a 10 point font size is clearly defined for printed documents and always looks the same on paper, for the screen this definition must be converted to pixels. But there is no definition for the size of a pixel, and not even the conversion factors are the same for all operating systems. The method Windows uses to convert font sizes is different from graphical user interfaces on Linux, and the Macintosh operating system is different again. Many CSS format definitions may be clearly stated in the file, but the results on the screen can still be far from identical and are often frustrating.

Another very important aspect to consider, as you develop styles for a web site, are the people who will visit and use your site. Many people with restricted visual capabilities do not perceive colors and shapes in the same way you do. While you may regard a particular design element as "elegant", some visitors will find that it renders your site "illegible". And "illegible" means: you and your site have lost a visitor. With the many possibilities that style sheets offer, you may be tempted to use special fonts or subtle color shades. As "pretty" as this may look - depending on the rendering device and the visual restrictions your visitors need to deal with, you will have to pay the price in reduced usability and practicality. On the other hand, you can use style sheets to improve your site design for people with impaired vision. Good color contrast, font sizes in the medium range, well-balanced font width and line height, and avoiding critical color combinations (e.g. red/green for background/foreground) - these are important characteristics of frequently-visited web sites.

If you design web sites, you must make your own decision about this. Style sheets offer you a range of entirely new possibilities for web site layout. However, the more you allow your design to depend on certain style sheet effects, the more trouble you may be causing for people using low-level hardware or people with impaired vision. Apart from text-based browsers like Lynx, today there are hardly any browsers that do not support style sheets at all. But early versions of Netscape 4.x, which are still being used, suffer from a built-in weakness: if the user deactivates JavaScript in these older browsers, CSS style sheets are automatically deactivated, too. This is due to the fact that, originally, CSS used to be interpreted directly by Netscape's JavaScript interpreter. For the same reason, Netscape 4.x features an outdated intermediate syntax called JSSS that allows CSS definitions to be written by using JavaScript. This speciality of Netscape 4.x offers one advantage: if you deactivate JavaScript, you can check what your CSS-styled web pages look like in browsers without CSS support. More recent versions within the Netscape 4.x series allow you to switch off CSS independently from JavaScript. By all means, you should put your site through that test.

 nach obennach unten 

CSS formats and CSS properties

CSS style sheets consist of formats that you define for particular HTML elements or for a particular group of HTML elements. For selecting a group of HTML elements to which a format definition should apply, the CSS syntax provides something called selectors. CSS formats can be defined either in a central style section of the HTML document, or in a separate CSS file, or directly within the opening tag of the HTML element.

CSS formats consist of one or more properties and the values assigned to these properties. For example, you can define a format for third level headings in which you set certain values for properties such as font size, font color, and the distance between the heading and the following paragraph.

The chapter Kapitel Defining CSS formats tells you how and where to integrate CSS in HTML documents, describes how the selection of a group of HTML elements works, and explains the general rules for format definitions. The chapter Kapitel CSS properties systematically describes the available formatting properties that you can define within format definitions, as well as the available values that you can assign to these properties.

 nach oben
weiter Seite Integrating style sheets into HTML
zurück Seite HTML variants
 

© 2001 E-Mail stefan.muenz@selfhtml.org