1 Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML A presentation for NORCAL IBUG June 2, 2000 Jon Gibbens –

2 Outline n CSS intro n What’s in a Stylesheet? n How to use a Stylesheet? (Embedded Stylesheets, Linked Stylesheets, Elements of a Stylesheet) n FOCUS code to create HTML n Example - Take a mainframe report & make it less ‘mainframey’ n Software & Links n Q & A

3 CSS Intro - What are StyleSheets? What Can They Do? n Separate Style/Layout from Content (art people from writers) n Change the visual appearance of a web document n Fonts, Font Sizes, Headings, Footings, Tables n Allow for multiple ‘looks’ for the same HTML code (ie..a web browser stylesheet vs a printer stylesheet) n ‘Cascading’ refers to the ability to have multiple stylesheets applied to same HTML page n ‘Cascading’ also refers to how conflicts are resolved when stylesheets refer to the same property.

4 What goes inside a Stylesheet?? n Rules - Rules on how to display something n Example rule(s): H1 { text-align: center } P { color: red; font-family: sans-serif } n Consists of a selector and a declaration n Selector is the HTML tag that the stylesheet rule will be attached to (ie.. H1, P, TABLE,etc) n Declaration is what the style actually is, and what to do with it.

5 How to use a Stylesheet? n Stylesheets can be: n Embedded in a page n Linked to in a page n Imported into a page n Added inline in the code n We will cover Embedding and Linking in this talk n Importing and Inline stylesheets are not implemented in all browsers, or support is buggy!!

6 Embedding a Stylesheet n Embedded in HTML code inside HEAD tag n Example of inline stylesheet Sample Report <!-- H1 {text-align: center, font-style: italic} --> n Comment Tag used to shield stylesheet from browsers that can’t use it.

7 Linking to a Stylesheet n Ideal for using same stylesheet with multiple pages n Embedded in HTML code inside HEAD tag n Example of a linked stylesheet Sample Report n Create external file called style.css which contains stylesheet code

8 Sample elements of a stylesheet (Fonts, Colors, Spacing) n Fonts {font-family: monospace} {font: Ariel} {font: Courier, font-size: 15pt} n Colors { color: blue } { background : green } n Spacing {text-align: center} {text-indent: 10cm} or {text-indent:20%}

9 Using FOCUS to create HTML n General guidelines n Pre-allocate file with MOD access (so can concatenate data to it) n At end of your TABLE FILE section, put the following lines ON TABLE HOLD AS FORMAT HTML (which creates fully-formed HTML document) or ON TABLE HOLD AS FORMAT HTMTABLE (which creates just a HTML table) n This will create a HTML report

10 FOCUS code to create HTML -SET &SETUPSTRING=“ FOCUS Report - Sample FOCUS Report ”; -WRITE WIGDIST1 &SETUPSTRING TABLE FILE WIDGETS SUM DIST_COUNT AS 'DIST,COUNT’ N_DIST_CNT NOPRINT PCT.N_DIST_CNT AS 'DIST,COUNT,%' DIST_AMOUNT AS 'DIST,AMOUNT' N_DIST_AMT NOPRINT PCT.N_DIST_AMT AS 'DIST,AMOUNT,%' COLUMN-TOTAL BY DISTI6YYM AS 'DIST,YYM’ BY STATE BY PRODWEIGHT NOPRINT BY PRODTYPE AS 'PRODUCT,ROLLUP' ON PRODTYPE RECOMPUTE AS '*TOTAL' ON TABLE HOLD AS WIGDIST1 FORMAT HTMTABLE ON TABLE SET LINES 9999 END -SET &ENDSTRING=‘ Contains confidential information ’; -WRITE WIGDIST1 &ENDSTRING Important

11 Example: Take a mainframe report and make it less ‘mainframey’ n Change Header font,font size & color n Change table font and border settings n Change footer font & alignment

12 CSS Stylesheet to accomplish this (save as style1.css) H1 { font-family : Haettenschweiler; color : Maroon; font-size: xx-large; } TABLE, TR, TD { border-color : Olive; font-family : Arial; } P { background-color : Yellow; text-align : center; } Change font,color & size Change color & font Change color and alignment

13 2 Techniques to ‘apply’ this stylesheet 1. Embed in FOCUS code..ie: -SET &SETUPSTRING=“ FOCUS Report - - <!-- H1 {font-family : Haettenschweiler; etc etc etc - --> - Sample FOCUS Report ”; 2. Upload to web server and then link to it..ie SET &SETUPSTRING=“ FOCUS Report

14 What you get after you apply the stylesheet (Before & After)

15 Browser Compatibility Issues n In short - newest browsers (IE 5+, Netscape 4+ and latest version of Opera) have the best support n Caveat: They don’t all support ALL the features n Best bet is to implement in an intranet environment where browser versions are locked down, then write your stylesheet code accordingly. n Use the Master List (URL at end) n Can do some trickery with Javascript to display the appropriate stylesheet for a specific browser (but that’s another presentation)

16 StyleSheet Editing Software n TopStyle Lite & Eval versions available. Commercial version: $50 n DreamWeaver day eval version available, Cost: $250 n Windows Notepad/Wordpad or Unix vi/pico editor - Free

17 Web Links/Resources n W3C.org - n Webreview.com n The Master List Grid which lists all of the CSS properties by browsers that support them

18 Q & A