CSS : Cascading Style Sheets

1
CSS Cascading Style Sheets

• Ann Dobbs
• Class i385e

2
Presentation

• CSS Defined
• Advantages of Using CSS
• Disadvantages of Using CSS
• Advanced Uses
• Other good sites for learning CSS
• References

3
CSS Defined

• Wikipedia
• Cascading Style Sheets (CSS) is a stylesheet
  language used to describe the presentation of a
  document written in a markup language. Its most
  common application is to style web pages written
  in HTML and XHTML, but the language can be
  applied to any kind of XML document, including
  SVG and XUL.

4
Stylesheets

• Are text style layout instructions that extend
  the HTML (or XHTML, XML, etc.) in web pages,
  giving greater control over content presentation,
  including typography, layout, and presentation on
  different media (print, screen, mobile, audio,
  etc.)

5
Cascading Stylesheets

• Which style rules?
• Browser default
• External style sheet
• Internal style sheet (inside the ltheadgt tag)
• Inline style (inside an HTML element)
• ("Introduction to CSS," n.d.)

6
CSS vs. Inheritance

• Cascading is not inheritance, though the two
  sometimes get confused.
• Inheritance is related to the HTML documents
  containment hierarchy
• lthtmlgt
• ltbodygt
• ltpgt
• Each element will by default inherit the style of
  its parent element (.8 x.8 .64)

7
Advantages of Using CSS

• Separation of presentation of presentation
  content
• Less time and labor needed for site maintenance
  revisions
• Better accessibility
• Better/faster data-driven websites
• Better semantics
• Improved graphic design possibilities (ex Zen
  Garden site)

8
Advantages of Using CSS

• Enables different presentations of same page for
  different media
• Faster page load times

9
Disadvantages

• Inconsistent browser support (decreasing problem
  at this point )
• May need to design page for one browser, so be
  aware of what your users are using!
• Hacks to remedy browser differences can cause
  problems of their own.
• Most new browsers have quirks and strict modes to
  adjust their css interpretation for older css and
  css written for recent browsers

10
Disadvantages

• User may override your css or it may not display
  at all
• CSS has bugs, so crosscheck on browsers
• Easy for beginners to get carried away
• Use it when you need it
• Validate! Make sure your HTML is semantically
  correct CSS is good

11
Advanced Uses

• Use with database-driven websites and templates
• Provide different presentations to different
  media
• Use it to provide both presentation layout and
  screenreader / text-only content organization

12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
Other Good Sites

• Maxdesign (http//css.maxdesign.com.au)
• Westciv (http//www.westciv.com/)
• Holy CSS Zeldman! (http//www.dezwozhere.com/links
  .html)

16
References

• Cascading Style Sheets. (n.d.). Wikipedia.
  Retrieved November 2, 2006, from
  http//en.wikipedia.org/?wiki/?Cascading_Style_She
  ets
• Introduction to CSS. (n.d.). w3 School. Retrieved
  November 2, 2006, from http//www.ischool.utexas.e
  du/?7Ei385e/?readings/?css_intro.asp.htm
• Shea, D. (n.d.). CSS Zen Garden. Retrieved
  November 2, 2006, from http//www.mezzoblue.com/?z
  engarden/?resources/