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

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

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

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

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

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

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

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

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

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

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

Imported external style url(myway.css); You may specify url(readable.css) url(listening.css) aural;

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

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

Hierarchy of HTML tags … … …

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; }

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

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

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

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

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

CSS and Accessibility  Use good HTML: instead of  Make sure page is readable without any style sheet enabled CSS Techniques for WCAG 1.0

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

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

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

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

<!-- 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;} -->

<!-- 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% } -->

<!-- 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 ; } -->

<!-- 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: " · "} -->

References  1. Cascading Style Sheets: The Definitive Guide 2. Eric Meyer on CSS  Teach Yourself CSS in 24 Hours, Kynn Bartlett  W3C:  WaSP:  CSS FAQ: developer.irt.org/script/css.htmdeveloper.irt.org/script/css.htm  