ݺߣ

ݺߣShare a Scribd company logo

XHTML/CSS Presentation

•Download as PPT, PDF•
•
J
joshpuckett

This document provides best practices for standards-oriented front end development using XHTML and CSS. It discusses the differences between HTML and XHTML, proper use of elements and attributes in XHTML, recommended head content, using conditional comments for browser hacks, how to structure CSS files for different browsers, and techniques for writing semantic and accessible code, including proper use of tables.

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

More Related Content

XHTML/CSS Presentation

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