CSS for Developers

Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. CSS FOR DEVELOPERS A Designer’s Perspective
  • 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
  • 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. 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.
  • 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.
  • 10. RESET CSS FOR (SCREEN) MEDIA • Normalizesrendering across browsers • Several exist... Eric Meyer: http://meyerweb.com/eric/thoughts/ 2007/05/01/reset-reloaded/
  • 11. CSS
  • 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. 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. SELECTOR COMPONENTS element p id p#id-name class p.class-name combination p#id-name.class-name p.class-1.class-2
  • 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. 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. 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. 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. HOW IS CSS RENDERED? • Order (style sheets, CSS within style sheets) • Specificity (inline, id, class, element) http://www.htmldog.com/guides/cssadvanced/specificity/
  • 20. TOOLS & TIPS
  • 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. 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. FUN WITH CSS
  • 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. 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. QUESTIONS? • Email/Chat/VoIP: jason.pelletier@foundline.com • Twitter: @jason_pelletier