Excerpted from SAP R/3 on the Internet by Mario Perez, Alexander Hildenbrand, Bernd Matzke, and Peter Zencke, published by Addison Wesley.
The
Requires Free Membership to View
When you register, you will start receiving targeted emails from my award-winning team of editorial writers. Our goal is to keep you informed on the hottest topics and biggest challenges faced by SAP professionals today.
Hannah Smalltree, Editorial Director
popularity of the Web has not only increased demands for interaction with the user, but also increased the desire to additional graphic design options in HTML. Microsoft and Netscape attempted to meet these demands by creating a number of proprietary enhancements to HTML. The enhancements, however, remained isolated islands. They did not lead to a standard and ran only in proprietary browsers. Web designers, of course, reacted with anger. To use the new options, designers had to double the work involved in creating a Web page or support only a single browser.
The W3C organization followed a different path in its attempt to offer additional design options. Rather than introducing new HTML tags, the W3C decided to separate contents from presentation. It developed an additional language that set the graphic representation of standard HTML tags with style sheets. These style sheets offer a significant advantage. Both Microsoft and Netscape support style sheets that provide a common denominator for supplemental Web design. Although the two browsers do not produce identical results, they can both interpret and display all the commands.
Syntax for assigning style sheets
Up to now, the layout of headers, <H1>, depended on the browser. You can now use style sheets to ch ange the display of headers. For example, style sheets can define the size, weight and family of font. Permissable characteristics broadly cover the categories font, text color and background, box and classification. The number of attributes for each characteristic differs. The syntax is quite simple:
H1 {font-size: 50px; font-weight: bolder; font-family: arial;}
The style sheet begins with the name of the HTML element type. Curly brackets enclose all the characteristics being set. A semicolon (;) separates the characteristics. A colon (:) introduces assignments. The assignments overwrite the default values that the browser already has for these tags. Each <H1> header on the HTML page will now display the new value.
Note: Style sheets interpret an HTML text block (for example with the <DIV> or <SPAN> tags) as a box. The box is later called a layer, but do not confuse this layer with the <Layer> tag of the Netscape browser.
Assignments with classes and identifiers
The last example assigns all the <H1> headers ona Web page the the same style sheet. However, should you wish to change only selected headers, you can explicitly assign a style sheet to a class. You reference the style sheet in the HTML tag with an identifier of your choice by using the class attribute. Nothing in the definition of the style sheet changes except the point before the identifier:
.classname {font-size: 30px; font-weight: bold; font-family: arial;}
Referencing the style sheet of a class in an HTML tag:
<H1 class="classname">New header </H1>
You can also assign style sheets with IDs. If, for example, you wish to specify the point size in a specific text block, you would:
- provide the text block with an ID;
- define a style sheet for the ID.
You can define IDs for style sheets with whatever names you desire, as long as the name is preceded by a hash sign (#).
#box {font-size: 20px; font-weight: bold; font-family: Courier;}
...
<DIV id="box">
This text is inside a text block
</DIV>
Placing style sheets
As in the case of JavaScript, no predefined rules determine where to place style sheets in HTML pages. However, we recommend placing them in the header. Because the definitions of style sheets do no display any HTML tags, you must frame them with a specific tag: <STYLE>. The following gives text/css as the type:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 {font-size: 50px; font-weight: bolder; font-family: Arial;}
.header {font-size: 30px; font-weight: bold; font-family: Arial;}
#box {font-size: 20px; font-weight: bold; font-family: Courier;}
</STYLE>
</HEAD>
<BODY>
<H1> HTML with style sheets" </H1>
<H2 class="header">New headline </H2>
<DIV ID="box">
Text inside a text box
</DIV>
</BODY>
</HTML>
If you wish to make defined style sheets availabe to several Web pages at once, you should store the definition in an external file. You can then link the file to the header of the Web page with the <LINK> tag.
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
In addition to placing the definition of a style sheet within a <STYLE> tag, you can also specify them directly in the HTML tag:
<H1 style=" font-size: 50px; font-weight: bolder; font-family: arial;">
We recommend against this form, however, since it violates the principle of separating contents from design.
Note: Although the W3C has standardized the specification of style sheets, the Microsoft and Netscape browsers do not implement it completely. Accordingly, the following comments present only style sheets available equally to both browsers.
To read more about this and other SAP R/3 Internet issues, click to find out about SAP R/3 on the Internet.
This was first published in January 2002