using cascading stylesheets css with focus generated html
Download
Skip this Video
Download Presentation
Using Cascading Stylesheets (CSS) with FOCUS-Generated HTML

Loading in 2 Seconds...

play fullscreen
1 / 18

Using Cascading Stylesheets CSS with FOCUS-Generated HTML - PowerPoint PPT Presentation


  • 135 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Using Cascading Stylesheets CSS with FOCUS-Generated HTML' - nirav


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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 – [email protected]

outline
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
css intro what are stylesheets what can they do
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.
what goes inside a stylesheet
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.
how to use a stylesheet
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!!
embedding a stylesheet
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.
linking to a stylesheet
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
sample elements of a stylesheet fonts colors spacing
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%}

using focus to create html
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
focus code to create html
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

example take a mainframe report and make it less mainframey
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
css stylesheet to accomplish this save as style1 css
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

2 techniques to apply this stylesheet
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”>
browser compatibility issues
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)
stylesheet editing software
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
web links resources
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
ad