CS151, Class 5: About Cascading Style Sheets

Overview
* About style sheets
* CSS: Style sheets for HTML
* Lab

Administrivia
* EBoard or Whiteboard?
  + Don't stop taking notes.
* Thoughts on the course Web?
* Questions on homework during lab.
* Be prepared to report on something new after lab.

----------------------------------------

About Style Sheets

Two conflicting philosophies of markup
* Logical: Mark up the role of text
* Physical: Mark up the appearance of text

Why not combine the two?
Key idea: Require people to mark "logically" but allow
  them to specify formatting for those tags.

Logical: "This is a title"
Physical: Titles are blue, 18pt, bold, centered, Helvetica

Advantages?
* Reusability: Once you've defined it once, it looks the
  same "everywhere"
* Ease of changing: Only one change effects everything
* A lot less typing
* Gives you more freedom as a designer
* Encourages people to use logical markup
* Different "style sheets" can be applied to the same
  page
  + One for online viewing
  + One for printing
  + Cell phone / PDA
  + Aural 
* "Content specialists" can write information.
  "Designers" can do design.

Why are they sheets?
* Historical trivia: Printing tradition: Designers hand
  a "sheet" that describes style to typesetters.
  (This statement may be a lie.)

--------

Applying style sheets to the Web.

* W3C formed a "style sheets standards committee"
  + Took a long time (and is still taking a long time)
  + Kitchen sink approach: Lots of different ways to do
    the same thing (and a big standard)
* First version: Cascading Style Sheets, Version 1
* Key ideas (for the subset sam teaches):
  + Add a link to the style sheet to the head of 
    your document
<link rel="stylesheet" type="text/css" href="fred.css">
  + Each style sheet includes instructions for formatting
    the different parts of the document
H1 {
  color: blue;
  font-size: 18pt;
  font-family: "Helvetica", "sans-serif";
}
P {
  text-align: right;
  color: yellow;
}

What if you want different kinds of paragraphs?
* Add a "class" attribute to your paragraph tags
<p class="question">Why are they cascading?</p>
<p class="answer">I have no idea.</p>

* In the style sheet, write TAG.class
P.question {
  color: red;
}
P.answer {
  color: green;
}
* You are essentially unlimited in the classes you choose.

Last things:
* Two new tags that serve no real purpose other than letting
you add a class.
 + DIV: Big sections of text, such as multiple paragraph
 + SPAN: used for small sections, such as a word or two
<div class="qanda">
<p class="question">Why are they 
  <span class="term">cascading</term>?</p>
<p class="answer">I have no idea.</p>
</div>

Why are they cascading?
* Stylistic elements "cascade" from enclosing tags to inner
  tags.
* Styles cascade through multiple style sheets.

Interesting properties:
* word-spacing
* font-weight
*