CSS

1
CSS

• an introduction
• By Alex Bain Arthur Klepchukov

2
CSS in a Nutshell

• Definition Cascading style sheets
• You can do more than just (X)HTML without the
  overhead of JavaScript
• Separation of content and styling
• Able to "name" some manner of styling and then
  apply that to html elements
• Anything that has to do with layout or styling
  (the way something renders)
• e.g. color, sizing, spacing, fonts, margins,
  padding, etc etc etc
• Graceful degradation of styling
• Manageability
• Serving for alternative medias

3
The good, the bad, and the ugly

• CSS Zen Garden
• http//www.csszengarden.com
• MySpace
• http//www.myspace.com
• NY Lottery
• http//www.nylottery.org

4
Anatomy of a Stylesheet

• DOM Hierarchy
• Classes, IDs, General HTML elements
• When to use each
• How selective they are
• Precedence rules (see W3C for full details)
• W3C http//www.w3c.org
• Examples of each
• Classes
• .header-text font-size 90px
• IDs
• header margin 10px
• General HTML elements
• h1 font-size 90px

5
Example 1

• I have error message text that appears on all
  pages. It only appears once per page. How should
  I style this?
• Using external style sheet
• ltdiv id"errorText"gt
• Error lt error_msg gt
• lt/divgt

6
Example 2

• I have block quoted text that I want to have
  styled a little differently. It shows up on many
  articles per page, and on many pages.
• Also using external style sheet
• ltblockquote class"quotedText"
  cite"http//en.wikipedia.org/wiki/William_Shakesp
  eare"gt To be or not to be.lt/blockquotegt

7
Example 3

• I have elements that only appear on my home page.
• Using the ltstylegt tagltheadgt
• ltstyle type"text/css"gt
• a.homePageLink color red
• lt/stylegt
• lt/headgt
• ltbodygt lt!-- content --gt
• lta class"homePageLink href"http//rorclass.org
  "gthi!lt/agt

8
Example 4

• I'm sending out html emails to clients whose
  browsers may or may not load external
  stylesheets. How can I get my styling to appear?
• ltstyle typetext/cssgt in ltheadgt lt!-- OR
  --gtlta style"color red" href"http//rorclass.
  org"gtThis is the sitelt/agt

9
Best practices

• Use external stylesheets
• Style tags are an alternate, but not preferred,
  solution
• Inline styling should be avoided unless
  absolutely necessary
• Big picture Designers test one file. Developers
  test one file.

10
Box Model
11
Positioning

• Block and inline elements (display )
• Content flow
• position absolute, relative, fixed
• Containing block is extremely important
• Moved with top, right, bottom, and left offset
  properties
• Use z-index for stacking order

12
Advanced Examples

• List-based navigation http//macrabbit.com/cssedi
  t/
• 2-column layout http//www.csszengarden.com/?cssf
  ile207/207.css
• 3-column layout http//www.apple.com/mac/

13
CSS Validation

• You should.
• Period.

14
Cross-browser Compatibility

• Unavoidable issue
• Examples
• broken box model (IE6 and lower)
• nonuniform support for
• hover pseudo-selector
• child selector
• opacity, etc.
• incomplete support for entire CSS spec

15
Pitfalls Limitations

• Not easy or intuitive to go from Photoshop mockup
  or print layout to CSS design
• Limited to (X)HTML elements
• To get good cross-browser support, unorthodox
  styling must be sacrificed for something more
  common
• A new form of tag soup... too many divs?
• How do you name your classes and ids? Consistency
  is self-enforced

16
CSS on Rails

• Put stylesheets in public/stylesheets
• Add stylesheets using stylesheet_link_tag in your
  layout(s)
• Most helpers have an html_options hash that has a
  class gt value mapping
• link_to cool, action gt 'tagged', tag gt
  name , class gt tag