When first published, this page illustrated one of the Cascading Style Sheets used by this site. The object of using style sheets in the development of the site was to consolidate as much presentation information as possible in a single document to aid site maintenance, ensure consistency across different pages, and gain a performance benefit for those browsers using caching. (Small frequently used items are more likely to remain in cache, and do not need to be re-transmitted over the network.)
Whilst this page still illustrates a valid style sheet, this site no longer uses this form, as the original design necessitated one sheet for each screen resolution size. The current implementation uses variables for FONT-SIZE and LINE-HEIGHT, so that only one style sheet is required, and the text can be scaled according to screen resolution size. Scaling is determined by screen.width a JavaScript variable available to Internet Explorer, Netscape, and Opera. (There are other ways of doing this, but the chosen method avoids the need to detect which browser is in use.)
Having determined the screen resolution size, and set the scaling variables, a style sheet similar to the one below is created dynamically using JavaSCript. (See Dynamic Style Sheet)
H1 { |
font-family:Arial, sans-serif; font-weight:700; font-size:30.0pt; |
|
line-height:30.5pt; text-align:center; color:0000ff; } |
H2 { |
font-family:Arial, sans-serif; font-weight:700; font-size:20.0pt; |
line-height:20.5pt; text-align:center; color:0000ff; } | |
H3 { |
font-family:Arial, sans-serif; font-weight:700; font-size:14.0pt; |
line-height:14.5pt; text-align:center; color:000000; } | |
H4 { |
font-family:Arial, sans-serif; font-weight:700; font-size:14.0pt; |
line-height:14.5pt; text-align:left; color:000000; } | |
#Body-Pos { |
position:absolute; left:90px; top:20px; width:620px; z-index:1; } |
#Text-Right { |
position:relative; left:0px, top:12px; width:620px; z-index:3; |
text-align:right; } | |
Body { |
background:53c3ff; vlink:000099; text:000000; } |
P { |
font: 10.5pt Arial; line-height:11pt; text-align:justify; } |
A { |
color:ffffff; } |
In the original implementation, the style sheet was associated with each HTML page via the following statement:
LINK rel=stylesheet href="map800.css" type="text/css" |
This statement, was dynamically appended in the HEAD section, by a JavaScript routine, but is no longer required as the routine in question GetMap.js now builds the complete style sheet dynamically.
It will be noticed that most of the entries in the style sheet are used to assign default attributes to standard HTML tags.
Copyright © KMS-IT Limited 2002