• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS for Developers
 

CSS for Developers

on

  • 1,851 views

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

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.

Statistics

Views

Total Views
1,851
Views on SlideShare
1,851
Embed Views
0

Actions

Likes
1
Downloads
24
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

CSS for Developers CSS for Developers Presentation Transcript

  • 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 element. • Use ids and classes that are semantic.
  • 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/
  • 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.
  • 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/diagnostics/demo.html
  • 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 statistics.
  • 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
  • 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/
  • 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).
  • 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;
  • 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
  • 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.
  • Apply CSS CSS is a series of transformations. Select Set a subset of the HTML. qualities on selected elements. (selectors) (attributes)
  • 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
  • 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
  • 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)
  • 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
  • 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/
  • 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.
  • 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.
  • Debugging
  • Browser Testing Test your implementation in the browsers in your speci cation. Tools: • http://www.browsercam.com/ • http://browserlab.adobe.com/
  • Did You...? • Validate your HTML. http://validator.w3.org/ • Validate your CSS. http://jigsaw.w3.org/css-validator/
  • 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.
  • Firebug “Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” https://addons.mozilla.org/en-US/ refox/addon/1843
  • Troubleshoot Using background-color For placement, sizing or spacing bugs, set background-color on elements to see their interaction.
  • 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
  • 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.