1 / 18

Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML

Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML. A presentation for NORCAL IBUG June 2, 2000 Jon Gibbens – jon@provista.com. Outline. CSS intro What’s in a Stylesheet? How to use a Stylesheet? (Embedded Stylesheets, Linked Stylesheets, Elements of a Stylesheet)

nirav
Download Presentation

Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

  6. Embedding a Stylesheet • Embedded in HTML code inside HEAD tag • Example of inline stylesheet <HEAD><TITLE>Sample Report</TITLE> <STYLE TYPE=“text/css”> <!-- H1 {text-align: center, font-style: italic} --> </STYLE> </HEAD> • Comment Tag <!-- followed by --> used to shield stylesheet from browsers that can’t use it.

  7. Linking to a Stylesheet • Ideal for using same stylesheet with multiple pages • Embedded in HTML code inside HEAD tag • Example of a linked stylesheet <HEAD> <TITLE>Sample Report</TITLE> <LINK REL=stylesheet HREF=“style.css” TYPE=“text/css”> </HEAD> • Create external file called style.css which contains stylesheet code

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

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

  10. FOCUS code to create HTML -SET &SETUPSTRING=“<HEAD><TITLE>FOCUS Report</TITLE></HEAD><BODY> - <H1>Sample FOCUS Report</H1>”; -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=‘<P>Contains confidential information</P></BODY>’; -WRITE WIGDIST1 &ENDSTRING Important

  11. Example: Take a mainframe report and make it less ‘mainframey’ • Change Header font ,font size & color • Change table font and border settings • 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=“<HEAD><TITLE>FOCUS Report</TITLE> - <STYLE TYPE=“text/css”> - <!-- H1 {font-family : Haettenschweiler; etc etc etc - --> - </STYLE></HEAD><BODY><H1>Sample FOCUS Report</H1>”; • 2. Upload to web server and then link to it..ie.. -- -SET &SETUPSTRING=“<HEAD><TITLE>FOCUS Report</TITLE> <LINK REL=stylesheet HREF=“style1.css” TYPE=“text/css”></HEAD> <STYLE TYPE=“text/css”>

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

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

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

  17. Web Links/Resources • W3C.org - http://www.w3.org/Style/ • Webreview.com • The Master List - http://webreview.com/wr/pub/guides/style/mastergrid.html - Grid which lists all of the CSS properties by browsers that support them

  18. Q & A

More Related