The Incredible Coolness of Cascading Style Sheets

1
The Incredible Coolness of Cascading Style Sheets

• A Non-Technical Introduction for Teachers

2
What are external style sheets?

• Sets of instructions or rules that control how
  Web pages are displayed in a Web browser
• Documents that allow Web designers to separate
  Web page content from format

3
Types of CSSs

• Non-preferred types (by AAC)
• Inline (within the head tag)
• Embedded (within the body tag)
• Preferred type (by AAC)
• External
• stored in another file
• with .css extension

4
What are external style sheets?

• Documents that can specify
• Colors
• Margins
• Fonts
• Positioning
• Background color and image
• Documents that can
• Create special effects, including text rollovers
• Control the placement of graphics
• Design the layout of a page

5
Why Cascading?

• Multiple style sheets can be applied to a Web
  page
• The cascading order determines which rules take
  precedence
• Inline and embedded CSSs override external CSSs

6
The advantages of using CSS

• Cascading Style Sheets
• Provide a consistent design for all of the pages
  in a Web site
• Save time and reduce site maintenance changing
  the site's design requires only changing the
  style sheet
• Provide more display options than available using
  just HTML
• Speed up page downloads

7
Great Examples of Sites Using CSS

• Complexspiral
• Curvelicious
• Boxpunch
• 45 RPM
• Peace of Mind
• Pure CSS menus
• Fear of Style Sheets

8
How style sheets work

• Style sheets contain
• style rules
• Style rules have two parts
• the selector
• the definition
• The selector identifies
• the element affected by the rule
• The definition identifies
• how the element will be displayed
• The definition contains
• the property
• the value of the element

9
How style sheets work

• The form of a style rule looks like this
• selector property value
• If you want all of your lth1gt tags to be blue, the
  style rule would look like this
• h1 color blue

10
How style sheets work

• A rule also can have multiple properties and
  values
• selector property1 value1 property2 value2
  
• If you want all of your lth1gt tags to be blue and
  to use the Verdana font, the style sheet rule
  would look like this
• h1 color blue font-family Verdana

11
Types of CSS selectors

• HTML selectors define styles associated with HTML
  tags
• p font-family Verdana font-size 14px
  color black

12
Types of CSS selectors

• Class selectors, of which there are two types,
  define styles that can be used without redefining
  plain HTML tags
• p.footer font-family Arial font-size 9px
  color red
• .footer font-family Arial font-size 9px
  color red

13
Types of CSS selectors

• ID selectors define styles for an object with a
  unique ID (most often layers)
• banner top 10px left 20px width 700px
  height 165px

14
How to Use CSSs with Web sites

• Use external CSSs files to
• control design elements throughout an entire site
  
• avoid defining the same elements repeatedly in
  HTML files
• Link an external style sheet to an HTML file
• Use the following command in the HEAD section of
  the page
• ("mystyle.css" is the name of the external style
  sheet)
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css"gt
• Validate HTML and CSS files using a Web-based
  validator

15
CSSs and Browsers

• Most current browsers support Cascading Style
  Sheets
• Older browsers provide limited support for CSSs
• Minor differences in how different browsers
  display Web pages that use CSSs.
• Browsers with good CSS support include
• Microsoft Internet Explorer v6 or higher
  (Windows) or v5 or higher (Macintosh)
• Firefox (Windows, Linux, and Mac OS X)
• Mozilla (Windows, Linux, and Mac OS X)
• Netscape v7 or higher
• Opera v7 or higher (Windows, Linux, and Mac OS X)
• Safari (Mac OS X)
• Collectively account for about 96 of Internet
  users.