Intro to CSS.

Reading Re-cap
Introduce Project 1
Selectors & Specificity
The Box Model
Positioning
Browser Quirks

Reading Re-cap

1. A Dao of Web Design - John Allsopp
   http://www.alistapart.com/articles/dao/
   

   Summary:
   John is proposing embracing the web as a unique medium, and not one bound by the constraints of it's parent medium (print). Unfortunately, (a decade later) business still dictates design before code. Bugetary constraints prevent us from being able to present variations of designs to suit every device and platform. Graphic and print design by nature prevents the approach John is speaking of. The recent movement towards "responsive design" is bringing about an understanding among clients that pixel perfection is less important than producing an interface properly crafted for the platform. The visual design process itself needs to continue to account for resolution and platform responsiveness if we are to truly move in the direction of the Dao.

   
   

Reading Recap

2. From Table Hacks to CSS Layout: A Web Designer's Journey - Jeffrey Zeldman
   http://www.alistapart.com/articles/journey/
   

   Summary:
   Just be thankful that you'll never have to feel pain like what he describes in this article.

Project #1 - Due 3/2

1. Build a simple website.
2. Use everything you've learned.
3. Be creative.
4. You will have 5 minutes to present your website in class on 3/2.
5. You will be graded on semantic and syntactic correctness, use of a variety of HTML & CSS tags, visual design / aesthetic, & creativity / uniqueness.

• Three ways to match a CSS rule to an HTML element: tag, class, or id.

• Each of the three selectors has a different specificity.
• In order from high to low: id > class > tag
• You can chain selectors together to increase specificity.
• Whichever rule has the highest specificity gets applied.

The Box Model

• Defines rules for calculating height, width, margin, padding, & border
• Provides structure for everything.

Positioning

• All elements default to position: static (i.e., "unpositioned")
• Position options are "static", "relative", "absolute", and "fixed".
• Absolute vs. Relative
  • An element with either is said to be "positioned" and can take on other attributes
    (e.g., top, left, right, bottom, z-index, etc.)
  • Absolutely positioned elements are placed exactly from the top-left of the closest "positioned" parent.
  • Absolutely positioned elements are removed from the normal document flow.
  • Relatively positioned elements are placed relative to their natural position in the document flow.
• More resources on positioning:
  CSS layout fundamentals

Browser Quirks

• IE conditional comments
• Hacks (!ie7, *property, >body, !important!, body:empty, ... please stop!)
  Will the browser apply the rule(s)?
• Vendor specific styles
• Padding & the box model
• Z-indexes
• Overflows
• Specs not fully supported vs. odd behavior

Questions?

Assignment #3:
Apply CSS to Resume

• Get creative (Try designing a layout in Photoshop first.)
• It must validate using the W3C CSS Validation Service.
• It may use any CSS tags that validate including CSS3.
• When you are done, upload it to your webspace in a folder named 20120224.

Awesome videos & people you should know

1. Paul Irish:
   The Best of Paul Irish in 2011
2. Doug Crockford:
   Crockford on JavaScript: The Complete Series
3. John Resig:
   Talk: The DOM is a Mess