CSS FOR DEVELOPERSA 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.

• For Developers: (X)HTML helps express specific content in a structure

• For Designers: (X)HTML allows the enhancement of specific 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

• Normalizes rendering across browsers

• Several exist...Eric Meyer:http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

CSS

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 <p>...</p>

id (must be unique in a document)

<p id=”id-name”>...</p>

class (multiple per document allowed)

<p class=”class-name”>...</p>

combination <p id=”id-name” class=”class-name”>...</p>

<p class=”class-1 class-2”>...</p>

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 (separated by a space)

p.class-name a.class-3

multiple (separated by a comma)

p#id-name.class-name,p.class-1.class-2

GOOD TO KNOW

• Don’t begin a class or id with a number

• IE6 is buggy with multiple classes in a single selectorhttp://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.htmlhttp://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 ATTRIBUTESrendered output

<ul class="related-info"> <li> <h3>About Classes</h3> <p>Classes are specific instances of a course.</p> <p>Classes are typically offered by district and term, and several classes for the same course can run concurrently throughout the state.</p> <p><a href="<?= $this->url(array('controller' => 'course', 'action' => 'index', 'is-active' => 'yes'), null, true) ?>/"><strong>Courses</strong></a> are the main educational units that serve as the curriculum covered by classes.</p> </li></ul>

XHTML

.related-info { position: absolute; width: 250px; float: right; top: 60px; right: 7px; padding: 0 10px 15px 10px; background-color: #FBF7F5; border: 1px solid #4D4E53; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #4D4E53;}.related-info h3 { margin-top: 15px; font-size: 1.0em;}.related-info p { margin-bottom: 7px; font-size: 0.9em; line-height: 1.1;}

CSS

HOW IS CSS RENDERED?

• Order (style sheets, CSS within style sheets)

• Specificity (inline, id, class, element)http://www.htmldog.com/guides/cssadvanced/specificity/

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/firefox/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).

• For placement, 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 Pagehttp://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 Insidehttp://show-whats-inside.seventhgeneration.com/

• Found Line http://www.foundline.com/

THINGS TO CHECK OUT

• CSS frameworkshttp://code.google.com/p/blueprintcss/http://www.yaml.de/en/http://developer.yahoo.com/yui/grids/

• CSS IDEshttp://www.panic.com/coda/http://www.aptana.com/studio/downloadhttp://www.eclipse.org/webtools/wst/main.phphttp://westciv.com/style_master/index.html

• Microformatshttp://microformats.org/

• Debug style sheethttp://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/http://meyerweb.com/eric/tools/css/diagnostics/demo.html

QUESTIONS?

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

• Twitter : @jason_pelletier