CSS for Developers

  • 2,939 views
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

Views

Total Views
2,939
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
115
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 3. SEPARATION OF ROLES
  • 4. SEMANTIC (X)HTML
  • 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.
  • 7. RENDERING
  • 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. DEFAULT RENDERING
  • 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