0
XHTML/CSS: The Basics<br />Best practices for standards oriented front end development<br />
HTML vs. XHTML<br />They are slightly different. <br />Write XHTML, the end.<br />Element and attribute names must be lowe...
Head Content<br />Doctype, Title Tag.  Don&apos;t forget these!<br />Use conditional statements because IE6 is the Devil, ...
Conditional Statements<br />“Browser Hack”  <br />&lt;!--[if IE 6]&gt; <br />link to another css sheet here <br />&lt;![en...
How I Start A Project<br />Application.css <br />IE6_only.css <br />IE7_only.css <br />Reset.css <br />McKinsey CSS/HTML <...
Don&apos;t Write Crappy Code<br />XHTML Transitional <br />Empty tags == bad <br />&lt;br /&gt; are crap, use margins <br ...
Tables are OK<br />&lt;table&gt; <br />&lt;thead&gt; <br />&lt;tr&gt; <br />&lt;th&gt;Table Header&lt;/th&gt; <br />&lt;/t...
Xhtml Css Presentation
Upcoming SlideShare
Loading in...5
×

Xhtml Css Presentation

314

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
314
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Xhtml Css Presentation"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×