CSS Beyond the Screen

1
CSS Beyond the Screen

• Making a printable Web page
• ltlink hrefscreen.css relstylesheet
  typetext/css mediascreengt
• ltlink hrefprint.css relstylesheet
  typetext/css mediaprintgt
• Set each type of style (there are others too) to
  use the elements that are appropriate for each
• Footers, navigation, sidebars, breadcrumbs
• Change text characteristics to suit
• Font style, font size, italics/underlines
• Make headings more unique in print
• Margins for reading vs. ease of printing

2
Printing with links

• A color000 (this is black)
• Font-weight bold
• Text-decoration none
• content p aafter, .info ul li aafter
• content alt attr(href) gt
• See p 169

3
Proofing CSS

• Not all CSS features work perfectly on all
  browsers
• Ensure compatibility with IE 6.x Mozilla 1.x or
  Firefox 1.x
• Verify with alternate font sets
  (internationalization issues)
• 508 compliance with CSS too
• Use true headings and formatting, not styles
• Use alt or longdesc for elements
• Use good naming conventions
• Not red for required fields or go for input
  buttons
• Keep form fields in order

4
Interacting with Web Servers

• Lets look at some similar sites
• www.travelocity.com
• www.orbitz.com
• www.expedia.com
• Validate forms using javascript PHP
• User-Friendly form validation
• Integrating databases with Dreamweaver
• Connecting MySQL with Dreamweaver