CSS for Developers
    A Designer’s Perspective
Me = designer(print) + designer(web)
Implementing design
should not be your job.
But, you’re here.
HTML: The Design and
Development Interface
The roles of designer and developer overlap with HTML.
HTML
POSH
Create views with Plain Old Semantic HTML:
  • Minimize the use of <div> wrappers.
  • Use the appropriate HTML eleme...
Microformats
Encode your data in HTML using existing patterns.
<div id="hcard-Jason-Pelletier" class="vcard">
    <p><a cl...
POSH + Spice
For visually complex designs or applications, you may have to
bend the rules and use <div> wrappers or non-se...
HTML Validation
Do it.




http://validator.w3.org/
Debug Style Sheet
Use a debug style sheet to clean-up
and complete your HTML.




http://meyerweb.com/eric/tools/css/diagn...
CSS
Browser Compatibility




http://www.quirksmode.org/compatibility.html
Specify Your
Supported Browsers
Base your list of supported browser off of your
project’s (actual or anticipated) visitor s...
Progressive Enhancement
“A strategy for web design that...uses web
technologies in a layered fashion that allows
everyone ...
Reset the CSS
Use a reset style sheet loaded as your rst
style sheet. Like frameworks, don’t invent
your own.

Normalizes ...
Set font-size
to 62.5% on <body>

Sets 1em = 10px

Nested font-size declarations are multiplied.
<div style=”font-size: 1....
Use ems to Set Font Sizes
Using ems as the measurement to specify the
font-size attribute allows for greater accessibility...
Start from the Inside
    First, stylize the
1   interior content .
    (h1, h2, ..., p, li, etc.)

                      ...
Set margin-top
on Typography
The pattern tends to be
that the amount of
space between two
elements is determined
by the el...
Apply CSS
CSS is a series of transformations.



Select                                Set
a subset of the HTML.          ...
Components of Selectors
Use elements, ids and classes to select from the HTML.

element
HTML:     <p>This is a paragraph.<...
Building Selectors
Build a selector by combining elements, ids and/or classes.

single
HTML:     <p class=”class-name”>Thi...
Good to Know
•   Don’t begin an id or a class with a number.
•   An id must be unique within a document.
•   IE6 is buggy ...
Attributes
Qualities to be set for a selected subset of the HTML:
 • placement
 • size
 • spacing
 • style (colors, fonts,...
What CSS Wins?
When there are con icting transformations in CSS, order and
speci city are used to determine which transfor...
Use <body> for Design
Speci c to a Page or Section.
Set an id or class on <body> to change attributes
for elements on a sp...
What Not to Do
•   Tables are for tabular data. Don’t use tables for layout.
•   Use an external style sheet(s). Don’t put...
Debugging
Browser Testing
Test your implementation in the browsers in your speci cation.

Tools:
  • http://www.browsercam.com/
  • ...
Did You...?
•   Validate your HTML.
    http://validator.w3.org/

•   Validate your CSS.
    http://jigsaw.w3.org/css-vali...
Eliminate Extraneous HTML
Bugs are typically caused by the interaction of
elements. Removing unnecessary HTML reduces
the ...
Firebug
“Edit, debug, and monitor CSS, HTML,
and JavaScript live in any web page.”




https://addons.mozilla.org/en-US/ r...
Troubleshoot Using background-color
For placement, sizing or spacing bugs,
set background-color on elements to see
their i...
Hacks
Hacks can be used to resolve bugs in speci c browsers,
but may result in CSS that is invalid.

In-CSS Hack          ...
Thank You
Jason Pelletier
Found Line
jason.pelletier@foundline.com
@jason_pelletier
Presentation Links:
http://www.delicio...
Upcoming SlideShare
Loading in …5
×

CSS for Developers

3,053 views

Published on

More often than should be the case, web developers find themselves with the responsibility of implementing the visual design of a website or web application. However, they typically lack the experience to be effective. This is a crash course in CSS—from fundamental concepts to best practices, and even some insider tips straight from a designer.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,053
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide




































  • CSS for Developers

    1. 1. CSS for Developers A Designer’s Perspective
    2. 2. Me = designer(print) + designer(web)
    3. 3. Implementing design should not be your job.
    4. 4. But, you’re here.
    5. 5. HTML: The Design and Development Interface The roles of designer and developer overlap with HTML.
    6. 6. HTML
    7. 7. POSH Create views with Plain Old Semantic HTML: • Minimize the use of <div> wrappers. • Use the appropriate HTML element. • Use ids and classes that are semantic.
    8. 8. Microformats Encode your data in HTML using existing patterns. <div id="hcard-Jason-Pelletier" class="vcard"> <p><a class="url fn" href="http://foundline.com">Jason Pelletier</a></p> <p class="org">Found Line</p> ... </div> http://microformats.org/
    9. 9. POSH + Spice For visually complex designs or applications, you may have to bend the rules and use <div> wrappers or non-semantic ids or classes. Layer this on top of POSH.
    10. 10. HTML Validation Do it. http://validator.w3.org/
    11. 11. Debug Style Sheet Use a debug style sheet to clean-up and complete your HTML. http://meyerweb.com/eric/tools/css/diagnostics/demo.html
    12. 12. CSS
    13. 13. Browser Compatibility http://www.quirksmode.org/compatibility.html
    14. 14. Specify Your Supported Browsers Base your list of supported browser off of your project’s (actual or anticipated) visitor statistics.
    15. 15. Progressive Enhancement “A strategy for web design that...uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page...while also providing those with...more advanced browser software an enhanced version of the page.” http://en.wikipedia.org/wiki/Progressive_enhancement
    16. 16. Reset the CSS Use a reset style sheet loaded as your rst style sheet. Like frameworks, don’t invent your own. Normalizes rendering across browsers by resetting sizing and spacing attributes. Several exist...one is Eric Meyer’s http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
    17. 17. Set font-size to 62.5% on <body> Sets 1em = 10px Nested font-size declarations are multiplied. <div style=”font-size: 1.2em”><div style=”font-size: 1.2em”>Text</div></div> “Text” renders at 14.4px (1.2*1.2*10).
    18. 18. Use ems to Set Font Sizes Using ems as the measurement to specify the font-size attribute allows for greater accessibility. font-size: 1.6em;
    19. 19. Start from the Inside First, stylize the 1 interior content . (h1, h2, ..., p, li, etc.) 2 Then, stylize the 2 layout . (overall page, header, footer) 1
    20. 20. Set margin-top on Typography The pattern tends to be that the amount of space between two elements is determined by the element that follows that space.
    21. 21. Apply CSS CSS is a series of transformations. Select Set a subset of the HTML. qualities on selected elements. (selectors) (attributes)
    22. 22. Components of Selectors Use elements, ids and classes to select from the HTML. element HTML: <p>This is a paragraph.</p> Selector: p id HTML: <p id=”id-name”>This is a paragraph.</p> Selector: #id-name class HTML: <p class=”class-name”>This is a paragraph.</p> Selector: .class-name combination HTML: <p class=”class-name-1 class-name-2”>This is a paragraph.</p> Selector: .class-name-1.class-name-2
    23. 23. Building Selectors Build a selector by combining elements, ids and/or classes. single HTML: <p class=”class-name”>This is a paragraph.</p> Selector: p.class-name nested (separated by a space) HTML: <p id=”id-name”>This is a <a href=”http://example.com”>link</a>.</p> Selector: p a or p#id-name a or #id-name a multiple (separated by a comma) HTML: <p><em>This</em> is a <strong>paragraph</strong>.</p> Selector: em, strong or p em, p strong
    24. 24. Good to Know • Don’t begin an id or a class with a number. • An id must be unique within a document. • 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/8 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)
    25. 25. Attributes Qualities to be set for a selected subset of the HTML: • placement • size • spacing • style (colors, fonts, borders) http://www.w3schools.com/CSS/CSS_reference.asp
    26. 26. What CSS Wins? When there are con icting transformations in CSS, order and speci city are used to determine which transformation wins. Order Speci city inline id order of CSS within style sheets class order of style sheets element http://www.htmldog.com/guides/cssadvanced/speci city/
    27. 27. Use <body> for Design Speci c to a Page or Section. Set an id or class on <body> to change attributes for elements on a speci c page(s). Use the cascading nature of CSS to minimize unnecessary HTML.
    28. 28. What Not to Do • Tables are for tabular data. Don’t use tables for layout. • Use an external style sheet(s). Don’t put CSS inline or in the document <head>. • Use ids and classes based on semantic or functional meaning. Don’t use ids or classes that are based on visual presentation (except for POSH + spice). • Think through the patterns of the design so that you leverage the cascading nature of CSS. Don’t use !important to x speci city issues.
    29. 29. Debugging
    30. 30. Browser Testing Test your implementation in the browsers in your speci cation. Tools: • http://www.browsercam.com/ • http://browserlab.adobe.com/
    31. 31. Did You...? • Validate your HTML. http://validator.w3.org/ • Validate your CSS. http://jigsaw.w3.org/css-validator/
    32. 32. Eliminate Extraneous HTML Bugs are typically caused by the interaction of elements. Removing unnecessary HTML reduces the number of elements that can interact, and thus simpli es debugging.
    33. 33. Firebug “Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” https://addons.mozilla.org/en-US/ refox/addon/1843
    34. 34. Troubleshoot Using background-color For placement, sizing or spacing bugs, set background-color on elements to see their interaction.
    35. 35. Hacks Hacks can be used to resolve bugs in speci c browsers, but may result in CSS that is invalid. In-CSS Hack Conditional Statement Just in the style sheet: First, in the <head> of the HTML: * html #nav { <!--[if lt IE 7]> ... <link href="/css/ie.css" } type="text/css" rel="stylesheet" media="screen"> <![endif]--> Then, in the browser-speci c style sheet: #nav { ... } http://www.webdevout.net/css-hacks, http://www.quirksmode.org/css/condcom.html
    36. 36. Thank You Jason Pelletier Found Line jason.pelletier@foundline.com @jason_pelletier Presentation Links: http://www.delicious.com/jason_pelletier/cssfordevelopers The content of this presentation (except screenshots and quotes) is licensed under Creative Commons -- Attribution 3.0 United States License.

    ×