Agenda

• Midterm
• Session 6 Review
• Digital Design Production
• CSS Continued
  • Specificity
    1. ID Selectors
    2. Class Selectors
    3. Contextual Selectors
    4. Individual Element Selectors

    Example

  • Type
    • font-family
    • font-size
    • font-style
    • font-weight
    • font-variant
    • font:style weight variant size/line-height font-family;
  • Text
    • line-height
    • text-indext
    • text-align
    • text-decoration
    • text-transform
    • letter-spacing
    • word-spacing
  • Pseudoclasses
    • Anchors
      • link - unclicked links
      • visited - already clicked
      • hover - mouse over
      • active - mouse button pressed
  • Pseudoelements
    • first-line
    • first-letter
  • Misc
    • display
    • visibility
    • wildcard
• CSS Cheat Sheet
• Practical Practice

Readings

• Chapter 11, 12, 13, and 14
• Page 244 - Generated Content and Attribute Selectors
• Opera Web Standards Curriculum
  • CSS basics, by Christian Heilmann.
  • Inheritance and Cascade, by Tommy Olsson.
  • Text styling with CSS, by Ben Henick.
  • The CSS layout model - boxes, borders, margins, padding, by Ben Henick.
  • CSS background images, by Nicole Sullivan.
  • Styling lists and links, by Ben Buchanan.
  • Styling tables, by Ben Buchanan.
  • Styling forms, by Ben Henick.
  • Floats and clearing, by Tommy Olsson.
  • CSS static and relative positioning, by Tommy Olsson.
  • CSS absolute and fixed positioning, by Tommy Olsson.

Homework

Portfolio Re-organize

Let’s do a mini spiff up of our portfolio’s. Reorganize your portfolio using the div structure we have discussed. Include a header, navigation, content, and footer section. You may do some minimal styling, font-size, color, some borders, etc. If you feel comfortable with Photoshop or Fireworks you may continue and begin using graphics.

Article: None

No article.

Resources

• Kuler: Adobe Labs has released an incredibly useful and well designed color palette creator that beats the rest.
• Contrast checker: evalute contrast between type and background
• Color Scheme Generator 2: My favorite color scheme generation tool for its control and variety of system generation.
• Color Blender: A good, simple color utility, which exports to Illustrator and Photoshop
• Colour Lovers: Color palette generation in a social setting
• Color Palette Creator: Give it a base color, it will give you a color palette
• The Man in Blue: Technicolor: Palette shown in context of a CSS layout
• 4096Color Wheel: A different approach to a color wheel
• Colr.org: Generate color systems from a photo or randomly
• Color Mixers: A staple in color generation systems

Type

• Typetester: Compare web type in various faces, sizes, etc. One of my all time favorites
• Veer: Wonderful selection of fonts
• The Elements of Typographic Style Applied to the Web
• Usable Type
• Identifont: Utility for identifying a font
• Type Navigator: Visual font search system
• Font Explorer: Mac font book application
• Font Agent Pro: OS X font book
• Character Encoding Chart

Stock Photography

• Veer: Wonderful selection of stock photography
• iStock Photo
• Morgue File: Free!
• Stock Xchange
• Stock Vault
• iStock Pro
• Open Photo
• Getty Images
• Index Stock Imagery
• Absolute Vision

Icons

• Icon Buffet: Top notch icons for blogs, CMS, and more
• FamFamFam: A high qaulity, massive library of useful UI icons
• Icons: A good selection of icons
• Sanscons: Selection of icons with standard background color
• Tango Project: Open source icon project. High quality
• Mini Icons: Tiny UI icons
• Feed Icons: Get the standardized icons for RSS feeds
• Icons for Microformats