Adnan A. Al-Harazi
Academic Head
NCC Education, Yemen Center

Standard HTML is not intended to provide close control over the display of information on the screen. This is left to the web browser. HTML does provide some limited control over the meaning of information, and this is interpreted by the browser to provide appropriate visual cues to the user. This separation of presentation and meaning is both a strength and a weakness. The strength is that HTML can be used with many different types of systems, each of which is able to interpret the markup in the best form for the user. The weakness of the approach is that many web site designers want to be able to apply the same type of close control that is available with other more conventional media such as printed paper. HTML did not originally provide this type of control. The suppliers of browsers soon added extensions that provided this formatting capability at least to some extent. This quickly resulted in a lot of competing tag types and the pollution of the original clean design of HTML. This situation was obviously undesirable, and eventually a better solution was found with the use of style sheets. These were introduced into HTML from Version 3.2. '

A style sheet consists of different types of style sheets. HTML 4 implements a standard called CSS1 (Cascading Style Sheet 1). This will work with both of the main browsers used on PCs, although there are minor differences between their implementations. CSS have the following advantages:
– Simplifying HTML, instead of having to include a mass of format specifications in the body of an HTML page, CSS makes it possible to separate these out.
– Separation of style sheets from text content-Placing style sheets in separate files facilitates reuse. It is easy to have a standard set of style sheets that are used for all the web pages in a site.
– Cascading- CSS allows style information from several different style sheets to be blended together. An organization could have a basic style sheet and supplement this with specific style sheets for particular pages. The order of the style sheets is significant, with later ones over-riding earlier style sheets.
– Media independence- The separation of style sheets from text allows the same text to be used in different contexts. For example, different style sheets could be used with the same HTML to make it suitable for screen viewing, printing and for text use only.
– Alternate styles- The idea of media independence can be extended to allow the reader to choose different ways of viewing the same material. This can be easily achieved be allowing them to select the style sheet most appropriate to their taste.

A simple example of a style sheet is shown in Fig1.
In this example, a single style sheet is defined and called newstyle. This style will use a font called fantasy, a font size of 100 pixels and the color of the text is brown. This is just a tiny sample of the possible attributes that could be used in the style. Style sheets are usually a lot more complex than this example. The designer can reference more than one style sheet in an HTML document. The browser will then make decisions about what styles will be used for which element in the document, using a set of rules. It is the ability to have several style sheets controlling the appearance of a web that adds “cascading” to the name of this standard.

Applying Cascading Style Sheets
To apply cascading style sheets, let's start by constructing a simple style sheets shown in Fig2.

This style sheet defines two classes:
– simple style;
– fancy style.
These can be referenced as necessary through their class names. Notice that the full stop (.) tells that a class is starting.
– Simple style uses the Arial family of fonts, with a size of 60 pixels. Text is bold red and it uses a margin or 32 pixels at the start of the text element.
– Fancystyle uses the fantasy font family, at 150 pixels; text is cantered and is colored brown. A margin of 30 pixels is used at the start of the element.
– Font-size, margin-top etc are all properties.

We can reference style sheets by adding the “” tags inside the “” tags as in Fig 3.

The LINK tag forces the browser to read the style sheet. HREF attribute is referencing the location of the style sheet file. It could be saved locally in the web server or in another site. If more than one style sheet is needed, they can be listed one after another.

Using CSS in Tags
Individual classes can be used by incorporating them into a tag such as :

This will use the simplestyle

or applied to a division of a page :



If you have any questions about the lessons please send me an e-mail to [email protected].
Next week: More in Advanced HTML
——
[archive-e:669-v:13-y:2003-d:2003-09-18-p:education]