XHTML/CSS Presentation


Published on

  • Be the first to comment

  • Be the first to like this

XHTML/CSS Presentation

  1. 1. XHTML/CSS: The Basics Best practices for standards oriented front end development
  2. 2. HTML vs. XHTML <ul><li>They are slightly different. </li></ul><ul><li>Write XHTML, the end. </li></ul><ul><li>Element and attribute names must be lower case, attribute values must be quoted. </li></ul><ul><li>Never skip closing tags, this happens a lot. <br /> <hr /> <img src=”#” /> </li></ul><ul><li>Name attribute is now “id” </li></ul>
  3. 3. Head Content <ul><li>Doctype, Title Tag. Don't forget these! </li></ul><ul><li>Use conditional statements because IE6 is the Devil, so learn to hate it. </li></ul><ul><li>Write CSS for Firefox and Safari. </li></ul><ul><li>Add CSS for bad browsers (that's you, IE6). </li></ul>
  4. 4. Conditional Statements <ul><li>“ Browser Hack” </li></ul><ul><li><!--[if IE 6]> </li></ul><ul><li>link to another css sheet here </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if IE 7]> </li></ul><ul><li>link to another css sheet here </li></ul><ul><li><![endif]--> </li></ul>
  5. 5. How I Start A Project <ul><li>Application.css </li></ul><ul><li>IE6_only.css </li></ul><ul><li>IE7_only.css </li></ul><ul><li>Reset.css </li></ul><ul><li>McKinsey CSS/HTML </li></ul><ul><li>fix_png.js </li></ul>
  6. 6. Don't Write Crappy Code <ul><li>XHTML Transitional </li></ul><ul><li>Empty tags == bad </li></ul><ul><li><br /> are crap, use margins </li></ul><ul><li>Use inline and block elements for their intended purpose </li></ul><ul><li>Poorly structured markup, bad layout decisions. Write as little markup as possible! </li></ul>
  7. 7. Tables are OK <ul><li><table> </li></ul><ul><li><thead> </li></ul><ul><li><tr> </li></ul><ul><li><th>Table Header</th> </li></ul><ul><li></tr> </li></ul><ul><li></thead> </li></ul><ul><li><tbody> </li></ul><ul><li><tr> </li></ul><ul><li><td>Table Cell</td> </li></ul><ul><li></tr> </li></ul><ul><li></tbody> </li></ul><ul><li><tfoot> </li></ul><ul><li><tr> </li></ul><ul><li><td>Table Cell</td> </li></ul><ul><li></tr> </li></ul><ul><li></tfoot> </li></ul><ul><li></table> </li></ul>Proper Table Structure