CSS for Developers

CSS FOR DEVELOPERS A Designer’s Perspective

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

SEPARATION OF ROLES

SEMANTIC (X)HTML

SEMANTIC (X)HTML • Interface for developers and designers • Common language: browsers, screen readers, bots, etc. • ForDevelopers: (X)HTML helps express speciﬁc content in a structure • For Designers: (X)HTML allows the enhancement of speciﬁc content based on the structure

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.

RENDERING

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.

DEFAULT RENDERING

RESET CSS FOR (SCREEN) MEDIA • Normalizesrendering across browsers • Several exist... Eric Meyer: http://meyerweb.com/eric/thoughts/ 2007/05/01/reset-reloaded/

SELECTORS & ATTRIBUTES • CSS is a series of transformations: Select a subset of the (X)HTML (selectors) Set qualities on those selected elements (attributes)

IDS & CLASSES element ... id ... (must be unique in a document) class ... (multiple per document allowed) combination ... ...

SELECTOR COMPONENTS element p id p#id-name class p.class-name combination p#id-name.class-name p.class-1.class-2

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)

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)

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

SELECTORS, MEET ATTRIBUTES XHTML CSS rendered output <ul class=quot;related-infoquot;> .related-info { <li> position: absolute; <h3>About Classes</h3> width: 250px; Classes are specific instances of a course. float: right; 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. padding: 0 10px 15px 10px; <a href=quot;<?= $this->url(array('controller' => background-color: #FBF7F5; 'course', 'action' => 'index', 'is-active' => 'yes'), border: 1px solid #4D4E53; null, true) ?>/quot;>Courses</a> are the border-radius: 5px; main educational units that serve as the curriculum -moz-border-radius: 5px; covered by classes. -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; }

HOW IS CSS RENDERED? • Order (style sheets, CSS within style sheets) • Speciﬁcity (inline, id, class, element) http://www.htmldog.com/guides/cssadvanced/speciﬁcity/

TOOLS & TIPS

EXAMINE, MODIFY & DEBUG CSS • Firebug: “Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” https://addons.mozilla.org/en-US/ﬁrefox/addon/1843

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.

FUN WITH CSS

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/

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

QUESTIONS? • Email/Chat/VoIP: jason.pelletier@foundline.com • Twitter: @jason_pelletier

http://bradley-holt.blogspot.com	41
http://bradley-holt.com	7
http://www.slideshare.net	7
http://www.agglom.com	1
http://translate.googleusercontent.com	1
http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com	1

CSS for Developers

by jason.pelletier on Jan 24, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 58

Statistics

CSS for Developers — Presentation Transcript