Cascading Style Sheets - WM108

Arlyn J. Hubbell, Instructor; Email

Class Text

CSS Pocket Reference: Visual Presentation for the Web Eric A. Meyer
O'Reilly Media, Inc., ISBN-10: 0-596-51505-7

Class Nights:

january 19

january 26

february 2

february 9

february 16

february 23

march 1

Class I

• Review
• otaku.freeshell.org: connectivity, navigation, & file management
• HTML: questions?
• An Introduction to CSS
• What are they?
• Why use them?
• Why do they work?
• Types of Style Sheets
• Anatomy of a CSS Rule
• Homework
  Create a web page that uses all 3 types of style attachment . external, embedded, and inline. Include an instance where the embedded style sheet overrides a rule in your external style sheet, and another where an inline rule overrides a rule in your embedded style sheet. If you prefer, you may apply style techniques to the web site you began in WM102. Please email me at arlyn@panix.com with any questions or problems, and when you are done with this and all other assignments.
  
  Also, please read How to Size Text in CSS by Richard Rutter for some thoughts on how to handle text using CSS.

Class II

• Formatting Text
• Font
• Alignment
• Decorations
• Using Style Classes
• What is a Class?
• Syntax of a Class
• Using Style IDs
• What is an ID?
• Syntax of an ID
• Span vs. Div
• In-Class Exercise
• Homework
  Create a simple web page (or continue with the page you created in last week.s homework) demonstrating a logical uses of Classes and IDs to format content.
  
  Please read Contrast is King by Leslie Jensen-Inman .

Class III

• Incorporating Color
• Color Values
• Foreground vs. Background
• Incorporating Background Images
• Tiling
• Position
• Attachment
• In-Class Exercise
• Homework
  Format the page you created last week using the techniques learned this week. Pay close attention to where you define your style rules (External? Embedded? Inline?) and be ready to logically justify your decisions.
  
  Please read Whitespace by Mark Boulton

Class IV

• Elements as Boxes & Containers
• Attributes of a Box/Container
• Box/Container Roles
• In-Class Exercise
• Homework
  Please read In Defense of Readers by Mandy Brown

Class V

• Floating
• Inline
• Block
• Positioning
• Relative
• Absolute
• In-Class Exercise
• Homework
  Create a small web page including several paragraphs of text. Float a box of vocabulary & definitions to the left and a box of sidebar text to the right.
  
  Please read 12 Lessons for Those Afraid of CSS and Standards by Ben Henick

Class VI

• Page Layout
• Liquid
• Fixed
• Elastic
• Working with Columns
• In-Class Exercise
• Homework
  Please read Responsive Web Design by Ethan Marcotte
  
  and
  
  Separation Anxiety: The Myth of the Separation of Style from Content by Bob Stein

Class VII

• Advanced Style

---

---

Grade Determination
Per the requirements of Merrimack College, participants in this class will receive a letter grade upon completion of this course. Grades will be based on:

• class attendance and participation (25%)
• successful and timely completion of the assignments (25%)
• the final exercise (50%)

Please email arlyn@panix.com when homework assignments are ready for review. All html assignments, as well as the final exercise, must be done by hand (without the aid of any html or css software) and must be saved in the class' Unix account or on another appropriate Unix server that is accessible via the web.