Advanced CSS Topics

1
Advanced CSS Topics
2
Review CSS Layout 2

• Explain the difference between static, absolute,
  and fixed positioning.
• Describe how a CSS frames layout is created.
• What is relative positioning used for?
• Explain the difference between displaynone and
  visibilityhidden.
• What is the stacking order and how does it work?

3
Discussion Topics

• Alternate Style Sheets
• Media Style Sheets
• Managing Hacks

4
User Controlled Style Switching

• Server-side Programming (state)
• Client-side Programming (cookies)
• HTML-CSS (linking)

5
_at_Import
Switcher.html
main.css
core.css
_at_import core.css _at_import hacks.css
link main.css
hacks.css
6
Classes of Style Sheets

• Persistent - default
• Preferred title Higher Contrast
• Alternate rel alternate stylesheet

7
Linking
8
Formatting Data for Multiple Destinations
Server
Web Browser
Single Source of HTML Data
CSS Style Sheets
Other Media PDAs, Braille, TV, etc
Print Output
9
CSS Media Types

• All
• Braille
• Embossed
• Handheld
• Print
• Projection
• Screen
• Speech
• Tty
• tv

10
Media Approaches

• One stylesheet for all (media all)
• One stylesheet for several media (media print,
  projection)
• Import - _at_import url(print.css) print,
  projection
• _at_media - _at_media print
• _at_media screen

11
Creating Print Style Sheets

• Use !important to override screen styles
• Rework text styles
• Style backgrounds for print
• Hide unwanted page areas
• Add page breaks

12
Improve Your CSS Habits

• Add comments
• Name style sheets clearly
• Use Multiple classes
• Group styles
• Use multiple style sheets
• Design for contemporary browers first

13
Using Multiple Classes

• classimgborder floatleft /
• classimgborder floatright /

14
Using Multiple Style Sheets
main.css
layout.css
page.html
base.css
color.css
forms.css
15
Hacks