Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Advanced CSS Topics by trf16073

VIEWS: 0 PAGES: 15

									Advanced CSS Topics
    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 display:none
  and visibility:hidden.
• What is the stacking order and how does it
  work?
    Discussion Topics
•    Alternate Style Sheets
•    Media Style Sheets
•    Managing Hacks
User Controlled Style Switching

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

Switcher.html       main.css

                                      core.css
    link =      @import “core.css”
  “main.css”    @import “hacks.css”
                                        hacks.css
   Classes of Style Sheets


• Persistent - default
• Preferred – title = “Higher Contrast”
• Alternate – rel = “alternate stylesheet”
Linking
Formatting Data for Multiple Destinations


                     Server
                                            Web
                                           Browser

                        CSS Style Sheets
                                            Other
                                           Media –
     Single Source                         PDAs,
     of HTML Data                          Braille,
                                           TV, etc



                                            Print
                                           Output
CSS Media Types

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

• One stylesheet for all (media = “all”)
• One stylesheet for several media
  (media = “print, projection”)
• Import - @import url(print.css) print,
  projection;
• @media - @media print {…}
            @media screen {…}
    Creating Print Style Sheets

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


  1.   Add comments
  2.   Name style sheets clearly
  3.   Use Multiple classes
  4.   Group styles
  5.   Use multiple style sheets
  6.   Design for contemporary
       browers first
 Using Multiple Classes

<img src=“photo1.jpg” width=“100” height = “100”
   class=“imgborder floatleft” />
<img src=“photo1.jpg” width=“100” height = “100”
   class=“imgborder floatright” />
Using Multiple Style Sheets

                          main.css


                           layout.css
   page.html   base.css
                               color.css


                                     forms.css
Hacks

								
To top