Show me some CSS

1
Show me some CSS!

• / Simple style sheet /
• h1, h2, h3 font-family Verdana', sans-serif
  
• body
• font-family 'Arial', 'Helvetica',
  sans-serif
• font-weight normal
• font-size 10pt
• color black
• background-color white
• text-align left

2
About the Simple Example

• Note that CSS supports
• / C-style block comments /
• Multiple tag styles in one block
• A broad range of style modifications
• HTML tag style redefinition is very powerful
• p font-style italic makes all paragraphs
  italic
• But we can define our own style classes too
• .blue color blue can be applied to all
  sorts

3
So what is CSS?

• More control over the way information is
  presented
• Extra style information the browser can use to
  render your pages in a more effective way
• Replacement for tags and other clumsy
  spot-effect tags
• And quick, easy customisation of pages
• Plus centralised management of look-and-feel

4
Why bother?

• CSS-enabled pages look good!
• CSS2 allows overlapping objects
• CSS is more efficient than individually
  formatting items
• CSS-based pages are easier to maintain than
  individually formatted pages
• CSS helps to separate the style issues from the
  content and structure (HTML) issues

5
How can I write CSS?

• The Internet is cross-platform, so most scripting
  technologies have to be plain text
• As you have seen, CSS is plain text so use a
  text editor for external linked styles
• Or add style info to the area of a web
  page, by hand (or in a design tool, e.g.
  DreamWeaver)
• p color blue background-color FFCC00
• li font-family arial narrow, arial,
  sans-serif

6
Cascading priority

• This is a simplified explanation
• You can apply global formatting styles through a
  linked (external) style sheet
• Lowest priority
• Apply page-level styles in the area
• Medium priority
• Apply spot style effects to single tags
• Highest priority

7
Linked Style Sheet

• My Home Page
• href"http//www.cooljava.com/style_sheet/main_sty
  les.css"
• href"http//www.cooljava.com/style_sheet/navigati
  on_styles.css"
• t" src"http//www.cooljava.com/scripts/head_inclu
  de.js"

8
A Linked Style Sheet

• .Main-Text font-family Arial, Verdana
  font-size 9pt color 000066
• .Main-Text-Bold font-family Arial, Verdana
  font-size 9pt font-weight bold color
  000066
• .Main-Text-Italics font-family Arial,
  Verdana font-size 9pt font-style italic
  color 000066
• .Title font-family Arial, Verdana font-size
  14pt font-weight bold color CC0000
• .Sub-Title font-family Arial, Verdana
  font-size 12pt font-weight bold color
  CC0000
• .Contents font-family Arial, Verdana
  font-size 10pt font-weight bold color
  CC0000

9
Using a Style Sheet in HTML

• The Knights Templar
• Mystery surrounds virtually
  every aspect of the Templar story, from their
  origins in the aftermath of the First Crusade,
  through their rise to supreme wealth and power
  dominating medieval Europe for nearly two
  centuries - to their abrupt and dramatic
  suppression

10
Compatibility Issues

• Version four browsers support some CSS level one
  and a little CSS level two
• CSS1 is mostly about simple formatting and the
  look of documents
• CSS2 includes positioning, advanced formatting
  and many extensions for visually impaired users
• IE4 supports a lot of CSS1 and some CSS2
• Nav4 supports some CSS1 and a tiny bit of CSS2
• Nav6 claims to support all CSS1 and all CSS2!

11
References

• Use the module pages for links to useful sites
• Use search engines to find other on-line
  resources
• Book Dynamic HTML, the definitive reference by
  D. Goodman, OReilly Associates
• ISBN 1-56592-494-0
• www.ora.com