CSS FOR DEVELOPERS
    A Designer’s Perspective
WHAT ARE
                    WE DOING?
• Cover   fundamental CSS principles and best practices
• Illustrate
          an e...
SEPARATION OF ROLES
SEMANTIC (X)HTML
SEMANTIC (X)HTML
• Interface   for developers and designers
• Common       language: browsers, screen readers, bots, etc.
...
WHAT IS DESIGN
 ON THE WEB?
   • Purpose: Communication    (information,
    navigation, brand, etc.)
   • Design   is tec...
RENDERING
BROWSERS, SCREEN READERS,
  PRINT & MOBILE DEVICES
• All   use (X)HTML
• Each   renders (X)HTML differently
• Each   has a...
DEFAULT RENDERING
RESET CSS
            FOR (SCREEN) MEDIA
• Normalizesrendering
 across browsers
• Several
        exist...
 Eric Meyer:
 h...
CSS
SELECTORS & ATTRIBUTES
• CSS   is a series of transformations:
  Select a subset of the (X)HTML (selectors)
  Set qualitie...
IDS & CLASSES
element                           <p>...</p>




id
                                  <p id=”id-name”>...</p...
SELECTOR COMPONENTS
element       p




id
              p#id-name




class         p.class-name




combination
        ...
BUILDING SELECTORS
single                   p.class-name




nested
                         p.class-name a.class-3

(sepa...
GOOD TO KNOW
• Don’t    begin a class or id with a number
• IE6   is buggy with multiple classes in a single selector
 htt...
ATTRIBUTES
• Qualities   to be set for a selected subset of the (X)HTML
  • placement
  • size
  • spacing
  • style   (co...
SELECTORS, MEET ATTRIBUTES
                       XHTML                                         CSS                 render...
HOW IS CSS RENDERED?
• Order    (style sheets, CSS within style sheets)
• Specificity    (inline, id, class, element)
 http...
TOOLS & TIPS
EXAMINE, MODIFY
                 & DEBUG CSS
• Firebug: “Edit, debug, and      monitor CSS, HTML, and JavaScript
 live in ...
DEBUGGING TIPS
• Validate   (X)HTML http://validator.w3.org/
• Validate   CSS http://jigsaw.w3.org/css-validator/
• Use   ...
FUN WITH CSS
LIVE DEMOS
• VPR      Membership Drive Splash Page
 http://studio.foundline.com/VPR/splash_page_2008-10/index.php?stage=1&...
THINGS TO CHECK OUT
• CSS      frameworks                           • Microformats
 http://code.google.com/p/blueprintcss/...
QUESTIONS?

• Email/Chat/VoIP: jason.pelletier@foundline.com

• Twitter: @jason_pelletier
Upcoming SlideShare
Loading in …5
×

CSS for Developers

3,457 views

Published on

Presentation for the Burlington, VT PHP Users Group on 2009-01-22.

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,457
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
116
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

CSS for Developers

  1. 1. CSS FOR DEVELOPERS A Designer’s Perspective
  2. 2. WHAT ARE WE DOING? • Cover fundamental CSS principles and best practices • Illustrate an effective interface between the development and design roles • Give tips for implementing and debugging CSS • Non-Goal: Convert developers into designers
  3. 3. SEPARATION OF ROLES
  4. 4. SEMANTIC (X)HTML
  5. 5. SEMANTIC (X)HTML • Interface for developers and designers • Common language: browsers, screen readers, bots, etc. • ForDevelopers: (X)HTML helps express specific content in a structure • For Designers: (X)HTML allows the enhancement of specific content based on the structure
  6. 6. WHAT IS DESIGN ON THE WEB? • Purpose: Communication (information, navigation, brand, etc.) • Design is technical. • Design is an enhancement. • When implemented with CSS, design is a series of transformative statements.
  7. 7. RENDERING
  8. 8. BROWSERS, SCREEN READERS, PRINT & MOBILE DEVICES • All use (X)HTML • Each renders (X)HTML differently • Each has a default rendering • Different transformations may be implemented for different media.
  9. 9. DEFAULT RENDERING
  10. 10. RESET CSS FOR (SCREEN) MEDIA • Normalizesrendering across browsers • Several exist... Eric Meyer: http://meyerweb.com/eric/thoughts/ 2007/05/01/reset-reloaded/
  11. 11. CSS
  12. 12. SELECTORS & ATTRIBUTES • CSS is a series of transformations: Select a subset of the (X)HTML (selectors) Set qualities on those selected elements (attributes)
  13. 13. IDS & CLASSES element <p>...</p> id <p id=”id-name”>...</p> (must be unique in a document) class <p class=”class-name”>...</p> (multiple per document allowed) combination <p id=”id-name” class=”class-name”>...</p> <p class=”class-1 class-2”>...</p>
  14. 14. SELECTOR COMPONENTS element p id p#id-name class p.class-name combination p#id-name.class-name p.class-1.class-2
  15. 15. BUILDING SELECTORS single p.class-name nested p.class-name a.class-3 (separated by a space) multiple p#id-name.class-name, p.class-1.class-2 (separated by a comma)
  16. 16. GOOD TO KNOW • Don’t begin a class or id with a number • IE6 is buggy with multiple classes in a single selector http://www.ryanbrill.com/archives/multiple-classes-in-ie/ • CSS2 and CSS3 have several useful selectors (descendant, child, adjacent, attribute, pseudo-class, etc.), but IE6/7 do not support many of them. http://www.w3.org/TR/CSS2/selector.html http://www.quirksmode.org/css/contents.html • Recommend using a naming convention (standardize on underscores (_), dashes (-) or CamelCase)
  17. 17. ATTRIBUTES • Qualities to be set for a selected subset of the (X)HTML • placement • size • spacing • style (colors, fonts, borders) http://www.w3schools.com/CSS/CSS_reference.asp
  18. 18. SELECTORS, MEET ATTRIBUTES XHTML CSS rendered output <ul class=quot;related-infoquot;> .related-info { <li> position: absolute; <h3>About Classes</h3> width: 250px; <p>Classes are specific instances of a course.</p> float: right; <p>Classes are typically offered by district and top: 60px; term, and several classes for the same course can run right: 7px; concurrently throughout the state.</p> padding: 0 10px 15px 10px; <p><a href=quot;<?= $this->url(array('controller' => background-color: #FBF7F5; 'course', 'action' => 'index', 'is-active' => 'yes'), border: 1px solid #4D4E53; null, true) ?>/quot;><strong>Courses</strong></a> are the border-radius: 5px; main educational units that serve as the curriculum -moz-border-radius: 5px; covered by classes.</p> -webkit-border-radius: 5px; </li> color: #4D4E53; </ul> } .related-info h3 { margin-top: 15px; font-size: 1.0em; } .related-info p { margin-bottom: 7px; font-size: 0.9em; line-height: 1.1; }
  19. 19. HOW IS CSS RENDERED? • Order (style sheets, CSS within style sheets) • Specificity (inline, id, class, element) http://www.htmldog.com/guides/cssadvanced/specificity/
  20. 20. TOOLS & TIPS
  21. 21. EXAMINE, MODIFY & DEBUG CSS • Firebug: “Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” https://addons.mozilla.org/en-US/firefox/addon/1843
  22. 22. DEBUGGING TIPS • Validate (X)HTML http://validator.w3.org/ • Validate CSS http://jigsaw.w3.org/css-validator/ • Use Firebug to inspect CSS (and test some fixes on the fly). • Forplacement, sizing or spacing bugs, set background-color on elements to see interaction. (create debug.css) • Minimize use of wrapper <div> elements. • Document bugs and fixes for future use.
  23. 23. FUN WITH CSS
  24. 24. LIVE DEMOS • VPR Membership Drive Splash Page http://studio.foundline.com/VPR/splash_page_2008-10/index.php?stage=1&time=night&weather=rain • VPR Audio Player http://www.vpr.net/listen/stream/ • VPR Music http://www.vpr.net/music/ • Child Welfare Training Partnership • VSA Arts of Vermont http://www.vsavt.org/ • Orange Mountain, True Soap http://www.orangemtn.com/ • Northeast Pools & Spas http://www.northeastpools.net/ • Seventh Generation: Show What’s Inside http://show-whats-inside.seventhgeneration.com/ • Found Line http://www.foundline.com/
  25. 25. THINGS TO CHECK OUT • CSS frameworks • Microformats http://code.google.com/p/blueprintcss/ http://microformats.org/ http://www.yaml.de/en/ http://developer.yahoo.com/yui/grids/ • Debug style sheet • CSS IDEs http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/ http://meyerweb.com/eric/tools/css/diagnostics/demo.html http://www.panic.com/coda/ http://www.aptana.com/studio/download http://www.eclipse.org/webtools/wst/main.php http://westciv.com/style_master/index.html
  26. 26. QUESTIONS? • Email/Chat/VoIP: jason.pelletier@foundline.com • Twitter: @jason_pelletier

×