Host Access Transformation Services V7.5 Cascading Style Sheets (CSS)
Agenda <ul><li>CSS Definition and Overview </li></ul><ul><li>How HATS uses Stylesheets </li></ul><ul><li>CSS Selectors </l...
CSS Definition <ul><li>A cascading style sheet (CSS)  </li></ul><ul><ul><li>A simple mechanism for adding style (e.g. font...
CSS Overview <ul><li>CSS gives more control over the appearance of a Web page to the page creator than to the browser desi...
With and Without Style Sheets
What does HATS uses CSS for? <ul><li>Establish templates across all transformations </li></ul><ul><li>Maps host session co...
Linking to Style Sheets
Modifying a Stylesheet
Classic Terminal Theme (please don’t use this)
White Theme
Tan Theme
The CSS Syntax <ul><li>selector { attribute-name: property; </li></ul><ul><li>another attribute-name: property; </li></ul>...
CSS Syntax: Selectors <ul><li>Identifies matching element(s) in the HTML DOM </li></ul><ul><li>Can be an HTML Element Name...
CSS Selectors: the ID attribute <ul><li>Uniquely identifies the HTML element in the page. </li></ul><ul><ul><li>Think ID a...
CSS Selectors: the class attribute <ul><li>Multiple elements can have the same class attribute name </li></ul><ul><ul><li>...
CSS Selectors: Psuedo elements <ul><li>Add additional functionality based on the user interaction. </li></ul><ul><li>Appen...
CSS Selectors: Parent/Child Selectors <ul><li>Combine selectors to search the DOM for children of a selector: </li></ul><u...
CSS Selectors: Combinations <ul><li>Separate selectors with a comma to apply to multiple </li></ul><ul><li>.HGREEN ,   inp...
Order of Precedence <ul><ul><li>The STYLE attribute on an individual element tag  </li></ul></ul><ul><ul><li>The STYLE ele...
Modifications to JSP override Stylesheets <ul><li>HATS Stylesheet settings are global </li></ul><ul><li>If you add Style t...
CSS Limitations <ul><li>Not all browsers support CSS (think mobile browsers) </li></ul><ul><li>For comprehensive list of w...
CSS Reference Material <ul><li>Excellent Learning Examples </li></ul><ul><ul><li>http://meyerweb.com/ </li></ul></ul><ul><...
More CSS References <ul><ul><li>www.w3schools.com </li></ul></ul><ul><ul><ul><li>EXCELLENT site for learning web technolog...
Upcoming SlideShare
Loading in...5
×

Rational HATS and CSS

2,303

Published on

This is part of my classroom curriculum on IBM Rational Host Access Transformation Services. More material is available from our on site classroom courseware.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,303
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Transcript of "Rational HATS and CSS"

    1. 1. Host Access Transformation Services V7.5 Cascading Style Sheets (CSS)
    2. 2. Agenda <ul><li>CSS Definition and Overview </li></ul><ul><li>How HATS uses Stylesheets </li></ul><ul><li>CSS Selectors </li></ul><ul><li>Reference </li></ul><ul><li>Lab </li></ul>
    3. 3. CSS Definition <ul><li>A cascading style sheet (CSS) </li></ul><ul><ul><li>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. </li></ul></ul><ul><ul><li>Basically, a style sheet is made up of style rules that tell a browser how to present a document. </li></ul></ul>
    4. 4. CSS Overview <ul><li>CSS gives more control over the appearance of a Web page to the page creator than to the browser designer or the viewer. </li></ul><ul><li>With CSS, the sources of style definition for a given document element are in order of precedence </li></ul><ul><li>Promotes the separation of the presentation from the content </li></ul>
    5. 5. With and Without Style Sheets
    6. 6. What does HATS uses CSS for? <ul><li>Establish templates across all transformations </li></ul><ul><li>Maps host session colors/attributes to what is actually displayed on the JSP page. </li></ul><ul><li>There are several ways to change these mappings: </li></ul><ul><ul><li>Modify the appropriate CSS files themselves (for example, if you want to change a keypad button background color) </li></ul></ul><ul><ul><li>Add inline style tags to the source of your project's application.hap to configure the mapping of background colors, extended attributes, or extended colors across the entire host application. </li></ul></ul>
    7. 7. Linking to Style Sheets
    8. 8. Modifying a Stylesheet
    9. 9. Classic Terminal Theme (please don’t use this)
    10. 10. White Theme
    11. 11. Tan Theme
    12. 12. The CSS Syntax <ul><li>selector { attribute-name: property; </li></ul><ul><li>another attribute-name: property; </li></ul><ul><li>} </li></ul>
    13. 13. CSS Syntax: Selectors <ul><li>Identifies matching element(s) in the HTML DOM </li></ul><ul><li>Can be an HTML Element Name </li></ul><ul><ul><li>Body, table, div, span, p, blockquote, etc </li></ul></ul><ul><li>Can be an attribute name </li></ul><ul><ul><li>ID, class </li></ul></ul><ul><li>Can be a combination of element name </li></ul><ul><li>Can select child of a parent selector </li></ul>
    14. 14. CSS Selectors: the ID attribute <ul><li>Uniquely identifies the HTML element in the page. </li></ul><ul><ul><li>Think ID as in a driver's license </li></ul></ul><ul><ul><li>No one should have the same ID as you </li></ul></ul><ul><li>Should only be one per page </li></ul><ul><li>Use hash/pound/anoctothorpe to select </li></ul><ul><ul><li># customer { color: blue; } </li></ul></ul><ul><ul><li><span id =” customer ”>....</span> </li></ul></ul>
    15. 15. CSS Selectors: the class attribute <ul><li>Multiple elements can have the same class attribute name </li></ul><ul><ul><li>i.e. a class of students, a grouping </li></ul></ul><ul><li>Use the period notation to select: </li></ul><ul><li>.HATSTABLEHEADER { background-color : #006f00 ;} </li></ul><ul><li><table> </li></ul><ul><li><th class=”HATSTABLEHEADER”>... ..</th> </li></ul><ul><li></table> </li></ul>
    16. 16. CSS Selectors: Psuedo elements <ul><li>Add additional functionality based on the user interaction. </li></ul><ul><li>Append colon to your existing selector </li></ul><ul><li>Some browsers limited to 4 of these. </li></ul><ul><ul><li>a:link {color:#FF0000} /* unvisited link */ </li></ul></ul><ul><ul><li>a:visited {color:#00FF00} /* visited link */ </li></ul></ul><ul><ul><li>a:hover {color:#FF00FF} /* mouse over link */ </li></ul></ul><ul><ul><li>a:active {color:#0000FF} /* selected link */ </li></ul></ul>
    17. 17. CSS Selectors: Parent/Child Selectors <ul><li>Combine selectors to search the DOM for children of a selector: </li></ul><ul><ul><li>div.customer p{ color: red} </li></ul></ul><ul><ul><ul><li><div class=”customer”> <p> .... <p> </div> </li></ul></ul></ul><ul><ul><li>span # demographic . required {color: red} </li></ul></ul><ul><ul><ul><li>< span id=” demographic ”> </li></ul></ul></ul><ul><ul><ul><li><input class=” required ” type=”text” /> </li></ul></ul></ul><ul><ul><ul><li></span> </li></ul></ul></ul>
    18. 18. CSS Selectors: Combinations <ul><li>Separate selectors with a comma to apply to multiple </li></ul><ul><li>.HGREEN , input.REQUIRED { </li></ul><ul><li>color : #00ff00 ; </li></ul><ul><li>white-space : normal ; </li></ul><ul><li>letter-spacing : normal ; </li></ul><ul><li>} </li></ul><ul><li>Be sure to include the comma, otherwise you will be selecting the children of the .HGREEN class! A different rule altogether! </li></ul>
    19. 19. Order of Precedence <ul><ul><li>The STYLE attribute on an individual element tag </li></ul></ul><ul><ul><li>The STYLE element that defines a specific style sheet containing style declarations </li></ul></ul><ul><ul><ul><li>In a Web page, the STYLE element is placed between the TITLE statement and the BODY statement. </li></ul></ul></ul><ul><ul><li>LINK element that links to a separate document containing the STYLE element. </li></ul></ul><ul><ul><li>An imported style sheet, using the CSS @import notation to automatically import and merge an external style sheet with the current style sheet </li></ul></ul><ul><ul><li>Style attributes specified by the viewer to the browser </li></ul></ul><ul><ul><li>The default style sheet assumed by the browser </li></ul></ul>
    20. 20. Modifications to JSP override Stylesheets <ul><li>HATS Stylesheet settings are global </li></ul><ul><li>If you add Style tags to a transformation JSP these attributes will override the Stylesheet attribute settings for the application </li></ul><ul><li>Individual Style settings on transformation JSPs apply just to that JSP </li></ul>
    21. 21. CSS Limitations <ul><li>Not all browsers support CSS (think mobile browsers) </li></ul><ul><li>For comprehensive list of which browsers currently support CSS see http://www.w3.org/Style/CSS/#browsers </li></ul><ul><li>IE 6 has a broken model </li></ul><ul><li>Mozilla Firefox and Opera render the most true. IE 7 is much improved and a listed as a critical update for Windows </li></ul><ul><li>BEST PRACTICE: Develop in Firefox for ease of development, back port your code for IE6 (if IE7 is not the company’s supported browser) </li></ul><ul><li>BEST PRACTICE: Upgrade your corporate browser standard from IE6!!!! ...PLEASE!!! </li></ul>
    22. 22. CSS Reference Material <ul><li>Excellent Learning Examples </li></ul><ul><ul><li>http://meyerweb.com/ </li></ul></ul><ul><ul><ul><li>Eric Meyer is a leading web design expert. Great tips on this site. </li></ul></ul></ul><ul><ul><li>www.csszengarden.com </li></ul></ul><ul><ul><ul><li>A site which challenges designers to separate content from design. An excellent book available that matches the site. </li></ul></ul></ul><ul><ul><li>http://www.htmlhelp.com/reference/css/quick-tutorial.html </li></ul></ul><ul><ul><ul><li>CSS Quick tutorial </li></ul></ul></ul><ul><ul><li>http://www.cssbeauty.com/ </li></ul></ul><ul><ul><ul><li>Great source for CSS ideas </li></ul></ul></ul><ul><ul><li>http://thinkvitamin.com/ </li></ul></ul><ul><ul><ul><li>An online magazine for designers </li></ul></ul></ul>
    23. 23. More CSS References <ul><ul><li>www.w3schools.com </li></ul></ul><ul><ul><ul><li>EXCELLENT site for learning web technologies! </li></ul></ul></ul><ul><ul><li>http://htmlhelp.com/reference/css/ </li></ul></ul><ul><ul><ul><li>Web Design Group Guide to CSS </li></ul></ul></ul><ul><ul><li>http://www.w3.org/Style </li></ul></ul><ul><ul><ul><li>W3C Web Style Sheets </li></ul></ul></ul><ul><ul><li>http://www.w3.org/TR/REC-CSS2/ </li></ul></ul><ul><ul><ul><li>W3C CSS specification </li></ul></ul></ul><ul><ul><li>http://www.wdvl.com/Authoring/Style/Sheets/Tutorial.html </li></ul></ul><ul><ul><ul><li>WDVL Intro to Style Sheets </li></ul></ul></ul><ul><ul><li>http:// del.icio.us/klenny/webdesign </li></ul></ul><ul><ul><ul><li>All of these as well as my other web design links </li></ul></ul></ul>

    ×