Your SlideShare is downloading. ×
0
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
CSS for Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS for Developers

3,039

Published 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.

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

No Downloads
Views
Total Views
3,039
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
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

×