1. Kick It Up a Notch: Enhance your web page with Cascading Style Sheets Kathy Fletcher Manager, Training & Publications Support Services Office of Information Technology West Virginia University

2. Why use Style Sheets?  separate structure from appearance  create consistent appearance  ease of maintenance  increase accessibility  apply additional effects  reduce use of non-standard tags  reduce web page file size

3. Ensure Consistent Appearance & Ease of Maintenance  Create one style sheet  Use link tag to use for several web pages  Make changes in one file

4. Increase Accessibility  User can override your style sheet  You can create different style sheets for alternative devices

5. Apply Additional Effects  Add hover effect to links  Remove underlines on links  Add horizontal rule to headings  Use instead of a table for a border  Control paragraph, line, letter spacing  Use instead of tables for layout

6. Replace Non-standard Tags Some tags and attributes have been deprecated in HTML 4.0 Strict

7. Reduce Web Page File Size  Every keystroke counts!  Smaller files load more quickly  Save disk space  Example webreg.html Original: 27.2K Embedded Style Sheet: 26.2K External Style Sheet: 25.6K

8. Where do you put styles?  In-line - add to HTML tag  Embedded style sheets  External style sheets

9. In-line  Similar to adding attributes to html tags  Disadvantages decreased accessibility increased file size harder to update

10. Embedded style sheets  Put rules between style tags  Put in head section  Add html comment tags  Use when single document has unique style

11. External style sheets  Save rules in external file  Advantages ease of maintenance use less disk space increase accessibility

12. Imported external style sheets @import "faq.css"; @import url(myway.css); You may specify media-dependent @import rules: @import url(readable.css) print; @import url(listening.css) aural;

13. Three types of style sheets  Author: designed to fit the site you are currently visiting  User: your own style sheet, created to fulfill your own needs  User agent: default style sheets inside the browser you're using The style sheet rule with greatest weight will take precedence

14. Cascade Order: which style sheet rule wins?  author > user > browser  !important: user > author > browser  more specific > more general  order specified: later > earlier rules

15. Hierarchy of HTML tags … … …

16. Structure of a Rule  name_of_tag { property: value(s) ; …} H1 { font-family: Times, serif; }  Multiple properties on one rule: H1 {color: black; font-weight: bold;}  Group tags: H1, H2, H3 { font-family: Times, serif; }  Contextual selector: H1 EM {color: maroon; font-weight: bold; font-style: italic; }

17. Class selector & attribute To create rules that can be applied to a variety of html tags.bar {color: maroon; font-size: smaller; background-color: yellow;} … text … link

18. Apply Additional Effects  Add hover effect to links  Remove underlines on links  Add horizontal rule to headings  Control paragraph, line, letter spacing  Use instead of a table for a border  Use instead of tables for layout www.wvu.edu/~support/training/classmat/css/index_new.html

19. h1 { font-size: 2em; vertical-align: text-bottom; line-height: 1.25em; margin-right: 5%; font-family: "Arial Black", Verdana, sans-serif; letter-spacing: 0.5em; color: blue; background-color: silver} h2 { border-style: solid none none none; border-width: medium; border-color: #808080; margin-top: 1.5em; margin-bottom:.5em; font-size: 1.75em; text-transform: capitalize; } ul { margin-top:.1em; list-style: square} li { margin-bottom:.25em;} a { text-decoration: none; } a:hover { text-decoration: underline; color: #800000; background-color: #ffcc00;} Additional effects

20. !Important  User can mark items in their style own sheets as important  !important rules over-ride author’s settings p {font-size: 18pt !important}

21. Browser Support  Older (before CSS): NN3, Lynx  Limited: WebTV, EmacSpeak  Broken: IE3, IE4, NN4  Compliant: Mozilla and Netscape 6 Opera 5 and 6 recent versions of Internet Explorer

22. CSS and Accessibility  Use good HTML: instead of  Make sure page is readable without any style sheet enabled www.icdri.org/Kynn/chapter21.html CSS Techniques for WCAG 1.0 www.w3.org/TR/WCAG10-CSS-TECHS/

23. Validation  Validate your HTML validator.w3.org validator.w3.org  Validate your CSS jigsaw.w3.org/css-validator/ jigsaw.w3.org/css-validator/  Check for web accessibility bobby.watchfire.com bobby.watchfire.com

24. Additional Testing  Different browsers: Internet Explorer 5 Mozilla or Netscape 6 Netscape 4  Different platforms: PC / Mac  Different browser window sizes  Different resolutions

25. What to look for  Access to information  Functionality  Aesthetics

26. Create alternate style sheets for different media  screen  print  aural – EmacSpeak (unix)  handheld  tv, tty, braille, embossed, projected www.wvu.edu/~support/training/ classmat/css/etdlist3.html

27. <!-- body { font-family: Arial, Geneva, sans-serif; background-color: white; color: black;} p { width: 550px; } h2 { text-align: center; background-color: #FFF8E1; color: #800000; font-size: 1em; margin-bottom:.18em;} h3 { font-size: 1em; display: run-in; } ul { list-style-type: square; width: 520px;} em { font-weight: bold; background-color: white; color: maroon; font-style: normal; }.smalltext { font-size: 40% }.bar { background-color: #ffcc00; color: #000080; font-size: x-small; width: auto;} -->

28. <!-- body {font-family: Times, serif; color: black; background-color: white;} p, li {font-size: 12pt;} h1 { font-size: 18pt; font-weight: bold;} h2 { font-size: 14pt; font-weight: bold;} h3 { font-size: 12pt; font-weight: bold;} ul { list-style-type: square; page-break-inside: avoid;} em {font-style: italic; font-weight: bold; }.bar {display: none;}.break {page-break-after: always;}.smalltext { font-size: 75% } -->

29. <!-- body { voice-family: Paul, male; speak-punctuation: none} h1 { cue-before: url("ding.wav") } p { pause-after: 10ms; } strong { volume: loud; richness: 60Hz ; pause-before: 20ms; pause-after: 10ms ;} em { pause-before: 50ms; stress: 60Hz ; } -->

30. <!-- body {background: white; color: black} a:link {color: blue} a:visited {color: #990066} h1, h3 {color: #888888} p {margin: 0} img {max-width: 100%} h2 {background: #005A9C; color: white; padding: 0.3em; border-top: 1em solid #F73; margin-top: 0} div.back {border-top: 0.49em solid #CC0; margin: 1em 0} div.banner {margin: 0.5em 0; padding: 0.3em; background: black} div.banner p {display: inline; font-weight: bold} div.banner a:before {content: " · "} -->

31. References  1. Cascading Style Sheets: The Definitive Guide 2. Eric Meyer on CSS www.meyerweb.com/eric/books/ www.meyerweb.com/eric/books/  Teach Yourself CSS in 24 Hours, Kynn Bartlett www.cssin24hours.com/ www.cssin24hours.com/  W3C: www.w3.org/pub/WWW/Style/Welcome.html www.w3.org/pub/WWW/Style/Welcome.html  WaSP: www.webstandards.org/learn/standards/css/ www.webstandards.org/learn/standards/css/  CSS FAQ: developer.irt.org/script/css.htmdeveloper.irt.org/script/css.htm  www.richinstyle.com www.richinstyle.com  www.wvu.edu/~support/training/classmat/css/ www.wvu.edu/~support/training/classmat/css/