The document provides a comprehensive overview of Cascading Style Sheets (CSS) and their application in web document styling. It details CSS selectors, syntax, order of precedence, and best practices for different browsers, emphasizing the use of stylesheets to enhance the visual presentation of web pages. Additionally, it includes references for further learning and development in CSS.

1. Host Access Transformation Services V7.5 Cascading Style Sheets (CSS)

2. Agenda CSS Definition and Overview How HATS uses Stylesheets CSS Selectors Reference Lab

3. CSS Definition A cascading style sheet (CSS) A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Basically, a style sheet is made up of style rules that tell a browser how to present a document.

4. CSS Overview CSS gives more control over the appearance of a Web page to the page creator than to the browser designer or the viewer. With CSS, the sources of style definition for a given document element are in order of precedence Promotes the separation of the presentation from the content

5. With and Without Style Sheets

6. What does HATS uses CSS for? Establish templates across all transformations Maps host session colors/attributes to what is actually displayed on the JSP page. There are several ways to change these mappings: Modify the appropriate CSS files themselves (for example, if you want to change a keypad button background color) 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.

7. Linking to Style Sheets

8. Modifying a Stylesheet

9. Classic Terminal Theme (please don’t use this)

10. White Theme

11. Tan Theme

12. The CSS Syntax selector { attribute-name: property; another attribute-name: property; }

13. CSS Syntax: Selectors Identifies matching element(s) in the HTML DOM Can be an HTML Element Name Body, table, div, span, p, blockquote, etc Can be an attribute name ID, class Can be a combination of element name Can select child of a parent selector

14. CSS Selectors: the ID attribute Uniquely identifies the HTML element in the page. Think ID as in a driver's license No one should have the same ID as you Should only be one per page Use hash/pound/anoctothorpe to select # customer { color: blue; } <span id =” customer ”>....</span>

15. CSS Selectors: the class attribute Multiple elements can have the same class attribute name i.e. a class of students, a grouping Use the period notation to select: .HATSTABLEHEADER { background-color : #006f00 ;} <table> <th class=”HATSTABLEHEADER”>... ..</th> </table>

16. CSS Selectors: Psuedo elements Add additional functionality based on the user interaction. Append colon to your existing selector Some browsers limited to 4 of these. a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */

17. CSS Selectors: Parent/Child Selectors Combine selectors to search the DOM for children of a selector: div.customer p{ color: red} <div class=”customer”> <p> .... <p> </div> span # demographic . required {color: red} < span id=” demographic ”> <input class=” required ” type=”text” /> </span>

18. CSS Selectors: Combinations Separate selectors with a comma to apply to multiple .HGREEN , input.REQUIRED { color : #00ff00 ; white-space : normal ; letter-spacing : normal ; } Be sure to include the comma, otherwise you will be selecting the children of the .HGREEN class! A different rule altogether!

19. Order of Precedence The STYLE attribute on an individual element tag The STYLE element that defines a specific style sheet containing style declarations In a Web page, the STYLE element is placed between the TITLE statement and the BODY statement. LINK element that links to a separate document containing the STYLE element. An imported style sheet, using the CSS @import notation to automatically import and merge an external style sheet with the current style sheet Style attributes specified by the viewer to the browser The default style sheet assumed by the browser

20. Modifications to JSP override Stylesheets HATS Stylesheet settings are global If you add Style tags to a transformation JSP these attributes will override the Stylesheet attribute settings for the application Individual Style settings on transformation JSPs apply just to that JSP

21. CSS Limitations Not all browsers support CSS (think mobile browsers) For comprehensive list of which browsers currently support CSS see http://www.w3.org/Style/CSS/#browsers IE 6 has a broken model Mozilla Firefox and Opera render the most true. IE 7 is much improved and a listed as a critical update for Windows BEST PRACTICE: Develop in Firefox for ease of development, back port your code for IE6 (if IE7 is not the company’s supported browser) BEST PRACTICE: Upgrade your corporate browser standard from IE6!!!! ...PLEASE!!!

22. CSS Reference Material Excellent Learning Examples http://meyerweb.com/ Eric Meyer is a leading web design expert. Great tips on this site. www.csszengarden.com A site which challenges designers to separate content from design. An excellent book available that matches the site. http://www.htmlhelp.com/reference/css/quick-tutorial.html CSS Quick tutorial http://www.cssbeauty.com/ Great source for CSS ideas http://thinkvitamin.com/ An online magazine for designers

23. More CSS References www.w3schools.com EXCELLENT site for learning web technologies! http://htmlhelp.com/reference/css/ Web Design Group Guide to CSS http://www.w3.org/Style W3C Web Style Sheets http://www.w3.org/TR/REC-CSS2/ W3C CSS specification http://www.wdvl.com/Authoring/Style/Sheets/Tutorial.html WDVL Intro to Style Sheets http:// del.icio.us/klenny/webdesign All of these as well as my other web design links