12.6 Cascading Style Sheets
LANSA for the Web allows you to use cascading style sheets (CSS) with your Web function applications. Cascading style sheets allow you to describe a style that applies across one or more of your HTML pages. You can use CSS to define the presentation of an HTML page, including the font (face, size and color), background color, the positioning of elements within your HTML page as well as text decoration such as italics or underline.
For more details on cascading style sheets, refer elsewhere for information on Dynamic HTML (DHTML).
LANSA for the Web does not provide you with a CSS. You can create a CSS for your applications by creating a standard page named as DEFAULT_STYLE. In this page, you can define the presentation attributes of the elements in your applications.
The DEFAULT_STYLE page allows you to embed the style information directly into the HTML pages generated for your application. The CSS definitions are encapsulated by the <style> and </style> HTML tags.
If you have Web enabled your LANSA applications prior to Release 7.5 H5, you will need to recompile and regenerate the HTML for your functions.
Alternatively, you can modify the HTML pages manually and insert the <RDML MERGE="&STYLE"> statement just after the line containing the <title> element in the <head> section.
<RDML MERGE="&DTD_TRANSITIONAL">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><RDML MERGE="&FUNCTION"></title>
<RDML MERGE="&STYLE">
</head>
Example of Using a Cascading Style Sheet
FONTPREF1, FONTPREF2 and FONTPREF3 are created as Text Web components. These Web components contain the font families designated for the elements in your HTML page. The browser will attempt to locate and use the fonts in the order they are specified in the Web component.
For example, FONTPREF1 can be:
"Lucida Handwriting","Arial","Times New Roman"
To enable the CSS support, you will need to create the DEFAULT_STYLE page. An example of this page is provided below:
<style type="text/css">
body { font-family: <RDML COMPONENT="FONTPREF1">;
font-size: smallest;
color: gray;
margin-left: 5% }
table { font-family: <RDML COMPONENT="FONTPREF2">;
font-size: smallest;
color: gray }
h1, h2, h3 { font-family: <RDML COMPONENT="FONTPREF1">;
font-size: large;
color: darkblue }
strong { font-family: <RDML COMPONENT="FONTPREF1">;
color: gray;
font-size: small }
input { font-family: <RDML COMPONENT="FONTPREF3">;
color: gray;
font-size: smaller }
select { font-family: <RDML COMPONENT="FONTPREF2">;
font-size: smallest }
</style>
The CCS1 specifications require the font names to be included in quotes. Some browsers may work without the quotes, but regardless, font names should be included in quotes.