Your SlideShare is downloading. ×
0
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cascading Style Sheets - Part 02

5,594

Published on

CSS Guidelines

CSS Guidelines

Published in: Technology, Education
2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,594
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
102
Comments
2
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Cascading Style Sheets Hatem Mahmoud [email_address]
  • 2. Part 2
  • 3. Quick Review
  • 4. I don't hate Microsoft
  • 5. What is CSS? <ul><li>Layers of a web page: </li></ul><ul><ul><li>Content: Text, images, videos, etc. </li></ul></ul><ul><ul><li>Presentation: How the content will appear to a human </li></ul></ul><ul><ul><li>Behavior: Real-time user interaction: validation, sorting, drag-n-drop, etc. </li></ul></ul>
  • 6. What is CSS? <ul><li>CSS separates the presentation from the content </li></ul>
  • 7. Why CSS? <ul><li>Flexible, can be applied in several ways </li></ul><ul><li>Easy to maintain </li></ul><ul><li>Accessibility to different users with different devices. </li></ul><ul><li>CSS caching = less bandwidth + fast loading </li></ul>
  • 8. Need for Guidelines
  • 9. Why Guidelines? <ul><li>Stability </li></ul><ul><li>Cross-browser compatibility </li></ul><ul><li>Consistency </li></ul><ul><li>Readability </li></ul><ul><li>Maintainability </li></ul><ul><li>More time for real development </li></ul>
  • 10. How?
  • 11. 1) Establish a set of rules
  • 12. 2) Document those rules
  • 13. 3) Enforce their use
  • 14. Thank You!
  • 15. wait
  • 16. General Guidelines
  • 17. Respect major browsers IE 6+ Firefox 2+ Safari 3+
  • 18. Major Browsers (6, 2008) <ul><li>Source: http://www.w3schools.com/browsers/ </li></ul>
  • 19. Don&apos;t ignore IE 6
  • 20. IE7.js A JavaScript library to make Microsoft Internet Explorer (5, 6, 7) behave like a standards-compliant browser. http://code.google.com/p/ie7-js/
  • 21. IE7.js
  • 22. IE7.js Hot Link <ul><li>&lt;!--[if lt IE 7]&gt; </li></ul><ul><ul><ul><li>&lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot; http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js &amp;quot; &gt; </li></ul></ul></ul><ul><ul><ul><li>&lt;/script&gt; </li></ul></ul></ul><ul><li>&lt;![endif]--&gt; </li></ul>
  • 23. Use semantic markup
  • 24. Semantic Markup <ul><li>HTML is for describing the structure not the presentation of the content </li></ul><ul><li>Use HTML elements for what they were made for: &lt;div&gt; , &lt;span&gt; , &lt;label&gt; , &lt;p&gt; , &lt;br/&gt; , &lt;h2&gt; , &lt;th&gt; , &lt;td&gt; , &lt;ul&gt; , &lt;ol&gt; , &lt;li&gt; , ... </li></ul><ul><li>Don&apos;t nest blocks inside inline elements: &lt;span&gt;&lt;p&gt; incorrect &lt;/p&gt;&lt;/span&gt; </li></ul>
  • 25. Do not use tables for layout, they were made for tabular data
  • 26. &nbsp;
  • 27. &nbsp;
  • 28. Always use Web-safe fonts (Common fonts to all versions of Windows and Mac)
  • 29. Web-safe fonts <ul><li>Arial </li></ul><ul><li>Arial Black </li></ul><ul><li>Comic Sans MS </li></ul><ul><li>Courier New </li></ul><ul><li>Georgia </li></ul><ul><li>Impact </li></ul><ul><li>Lucida Console </li></ul><ul><li>Lucida Sans Unicode </li></ul><ul><li>Tahoma </li></ul><ul><li>Times New Roman </li></ul><ul><li>Trebuchet MS </li></ul><ul><li>Verdana </li></ul>
  • 30. When possible, use transparent GIFs instead of transparent PNGs
  • 31. Never resize images in CSS or HTML, they would look ugly
  • 32. Make your site accessible and usable for all users and devices
  • 33. Accessibility &amp; Usability <ul><li>Provide a “Skip to Main Content” link </li></ul><ul><li>Always provide a text equivalent for non-text content (image, video, flash, etc.) </li></ul><ul><li>Differentiate links (underlined) and use meaningful names (avoid &amp;quot;click here&amp;quot;) </li></ul><ul><li>Ensure that the color combinations have an adequate contrast </li></ul><ul><li>Don&apos;t expect the user to use a mouse! </li></ul>
  • 34. Validate your markup http://validator.w3.org/
  • 35. Validate your CSS http://jigsaw.w3.org/css-validator/
  • 36. CSS Guidelines
  • 37. Avoid inline styles
  • 38. Avoid inline styles <ul><li>Bad </li></ul><ul><li>&lt;p style=&amp;quot; color:red;margin:0; &amp;quot;&gt; My poor paragraph. &lt;/p&gt; </li></ul><ul><li>Good </li></ul><ul><li>&lt;link href=&amp;quot;screen.css&amp;quot; media=&amp;quot;screen&amp;quot; rel=&amp;quot;Stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; /&gt; </li></ul>
  • 39. Avoid fancy CSS3 selectors
  • 40. Compress your CSS http://www.cssdrive.com/
  • 41. Coding Tips
  • 42. Coding Tips <ul><li>1) File-naming convention: screen.css , ie6.css , reset.css , etc. </li></ul><ul><li>2) CSS rule names should describe the purpose not the style. </li></ul><ul><li>Use: #sidebar , .date , etc. </li></ul><ul><li>Instead of: #div1 , .red , etc. </li></ul>
  • 43. Coding Tips <ul><li>3) Divide into specific sections: </li></ul><ul><li>/*---&gt;&gt;&gt; GLOBAL &lt;&lt;&lt;---*/ </li></ul><ul><li>... </li></ul><ul><li>/*---&gt;&gt;&gt; HEADER &lt;&lt;&lt;---*/ </li></ul><ul><li>... </li></ul><ul><li>/*---&gt;&gt;&gt; FOOTER &lt;&lt;&lt;---*/ </li></ul><ul><li>... </li></ul>
  • 44. Coding Tips <ul><li>4) Use indentation: </li></ul><ul><ul><li>#sidebar { </li></ul></ul><ul><ul><li>width: 392px; </li></ul></ul><ul><ul><li>} #sidebar #articles { </li></ul></ul><ul><ul><li>background: #ccc; } </li></ul></ul><ul><ul><li>.side_button { </li></ul></ul><ul><ul><li>background: #fff; } </li></ul></ul>
  • 45. Coding Tips <ul><li>5) Use shorthand properties: </li></ul><ul><li>div { margin: 10px } </li></ul><ul><li>div { margin: 10px 3px } </li></ul><ul><li>div { padding: 10px 5px 3px } </li></ul><ul><li>div { padding: 10px 0 0 3px } </li></ul><ul><li>div { border: 1px solid #000; } </li></ul><ul><li>div { font: 140% Verdana; } </li></ul>
  • 46. Coding Tips <ul><ul><li>6) Surround embedded styles, if needed, with HTML comment characters to hide from older browsers: &lt;head&gt; &lt;!-- &lt;style type=&amp;quot;text/css&amp;quot;&gt; h1 {color:blue;} &lt;/style&gt; --&gt; &lt;/head&gt; </li></ul></ul>
  • 47. Organize your CSS
  • 48. How?
  • 49. Use a framework typography.css, grid.css, layout.css, form.css, etc.
  • 50. &nbsp;
  • 51. Or design your own
  • 52. Organize your CSS <ul><li>1) Separate your CSS code: </li></ul><ul><li>reset.css </li></ul><ul><li>header.css </li></ul><ul><li>content.css </li></ul><ul><li>footer.css </li></ul><ul><li>ie.css </li></ul>
  • 53. Organize your CSS <ul><li>2) Use a master CSS file: </li></ul><ul><li>master.css </li></ul><ul><li>@import url(”reset.css”); </li></ul><ul><li>@import url(”header.css”); </li></ul><ul><li>@import url(”content.css”); </li></ul><ul><li>@import url(”footer.css”); </li></ul><ul><li>@import url(”ie.css”); </li></ul>
  • 54. Organize your CSS <ul><li>3) Link to the master CSS file: </li></ul><ul><li>template.html </li></ul><ul><li>&lt;link href=&amp;quot; master.css &amp;quot; media=&amp;quot;screen&amp;quot; rel=&amp;quot;Stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; /&gt; </li></ul>
  • 55. Why?
  • 56. Master CSS <ul><li>Little code in each file </li></ul><ul><li>One link to all CSS files </li></ul><ul><li>Disable styling for some parts </li></ul><ul><li>Add more CSS files without touching HTML files </li></ul><ul><li>Separate hacks code </li></ul>
  • 57. CSS Reset
  • 58. CSS Reset <ul><li>* { margin:0; padding:0; } </li></ul><ul><li>1) Eliminates all differences in padding and margin across browsers </li></ul><ul><li>2) Eliminates margin collapses </li></ul><ul><li>But </li></ul><ul><li>1) Very heavy on the rendering agent to apply rules to every single element </li></ul><ul><li>2) Destroys a lot of good default styling </li></ul>
  • 59. Solution?
  • 60. Begin with a few default styles
  • 61. CSS Reset <ul><li>body, form { </li></ul><ul><ul><ul><li>margin: 0; </li></ul></ul></ul><ul><ul><ul><li>padding: 0; </li></ul></ul></ul><ul><ul><ul><li>font-family: Verdana; </li></ul></ul></ul><ul><li>} </li></ul><ul><li>h1, h2, h3, p, ul, ol { </li></ul><ul><ul><ul><li>margin: 0 0 1em; </li></ul></ul></ul><ul><li>} </li></ul>
  • 62. CSS Reset <ul><li>img { </li></ul><ul><ul><ul><li>border: none; </li></ul></ul></ul><ul><li>} </li></ul><ul><li>table { </li></ul><ul><ul><ul><li>border-collapse: collapse; </li></ul></ul></ul><ul><li>} </li></ul><ul><li>input, select, textarea { </li></ul><ul><ul><ul><li>font-family: inherit; </li></ul></ul></ul><ul><li>} </li></ul>
  • 63. Keep a library of helpful classes
  • 64. Helpful Classes <ul><li>.float_left { </li></ul><ul><ul><ul><li>float: left; </li></ul></ul></ul><ul><li>} </li></ul><ul><li>.float_right { </li></ul><ul><ul><ul><li>float: right; </li></ul></ul></ul><ul><li>} </li></ul><ul><li>.clear_both { </li></ul><ul><ul><ul><li>clear: both; </li></ul></ul></ul><ul><li>} </li></ul>
  • 65. Techniques
  • 66. Avoid CSS Hacks!
  • 67. Box Model Bug
  • 68. Avoid The Bug <ul><li>Avoid specifying both width and padding or border for an element </li></ul><ul><li>#sidebar {width:250px} </li></ul><ul><li>#news {padding:10px; </li></ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><li>border:1px solid;} </li></ul></ul></ul></ul></ul></ul></ul></ul></ul><ul><li>&lt;div id=&amp;quot;sidebar&amp;quot;&gt; </li></ul><ul><ul><ul><li>&lt;div id=&amp;quot;news&amp;quot;&gt; News &lt;/div&gt; </li></ul></ul></ul><ul><li>&lt;/div&gt; </li></ul>
  • 69. IE Hacks <ul><li>Use IE Conditional Comments to link to a different CSS file: </li></ul><ul><li>&lt;!--[if IE 5]&gt; &lt;link href=&amp;quot;ie5.css” type=&amp;quot;text/css&amp;quot;&gt; &lt;![endif]--&gt; </li></ul>
  • 70. IE Hacks <ul><li>[if IE] All versions of IE </li></ul><ul><li>[if IE 6] Only version 6 </li></ul><ul><li>[if lt IE 7] Less than 7 </li></ul><ul><li>[if lte IE 7] Less than or equal to 7 </li></ul><ul><li>[if gt IE 5] Greater than 5 </li></ul><ul><li>[if gre IE 5] Greater than or equal to 5 </li></ul>
  • 71. Targeting different media types
  • 72. &lt;link type=&amp;quot;text/css&amp;quot; href=&amp;quot;screen.css&amp;quot; media=&amp;quot; screen &amp;quot; /&gt;
  • 73. &nbsp;
  • 74. &lt;link type=&amp;quot;text/css&amp;quot; href=&amp;quot;print.css&amp;quot; media=&amp;quot; print &amp;quot; /&gt;
  • 75. &nbsp;
  • 76. Supported values: all , aural , braille , embossed , handheld , print , projection , screen , tty , tv
  • 77. Default value: all
  • 78. Alternative Style Sheets
  • 79. A document can link to multiple style sheets
  • 80. You can give it a default style and any number of alternatives for the user to choose from
  • 81. How to choose one?
  • 82. Some browsers support it
  • 83. Alternative Style Sheets
  • 84. Some browsers don&apos;t ;)
  • 85. How to create them?
  • 86. Using the right rel and title attributes
  • 87. 1) Persistent style sheets
  • 88. Linked without a title attribute and always applied
  • 89. &lt;link type=&amp;quot;text/css&amp;quot; href=&amp;quot;main.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; /&gt; Persistent style sheets
  • 90. Persistent style sheets
  • 91. 2) Preferred style sheets
  • 92. Linked with a title attribute and selected by default
  • 93. &lt;link type=&amp;quot;text/css&amp;quot; href=&amp;quot;green.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; title=&amp;quot; Green &amp;quot; /&gt; Preferred style sheets
  • 94. Preferred style sheets
  • 95. 3) Alternate style sheets
  • 96. Linked with a title attribute, and the rel attribute should be set to “ alternate stylesheet “
  • 97. &lt;link type=&amp;quot;text/css&amp;quot; href=&amp;quot;orange.css&amp;quot; rel=&amp;quot;alternate stylesheet&amp;quot; title=&amp;quot; Orange &amp;quot; /&gt; Alternate style sheets
  • 98. Alternate style sheets
  • 99. Not cross-browser?
  • 100. Use JavaScript
  • 101. Alternative Style Sheets
  • 102. Floating
  • 103. Floating <ul><li>A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left ( float:left ) or right ( float:right ) until its outer edge touches the edge of the containing block or the outer edge of another float. </li></ul>
  • 104. Floating <ul><li>Floating an element converts it to a block </li></ul><ul><li>Unlike boxes in the normal flow, the vertical margins of a floated box are not collapsed with the margins of boxes either above or below it. </li></ul>
  • 105. Floating
  • 106. Floating <ul><li>Content flows down the right side of a left-floated box and down the left side of a right-floated box. </li></ul><ul><li>A floated box must have an explicit width via the width property or its intrinsic width (for replaced elements: img , input , textarea , etc.) </li></ul>
  • 107. Example
  • 108. Floating <ul><li>&lt;p&gt; </li></ul><ul><li>&lt;span style=&amp;quot; float:right; &amp;quot;&gt; This span is floated right. &lt;/span&gt; </li></ul><ul><li>This is my paragraph. This is my paragraph. This is my paragraph. </li></ul><ul><li>&lt;/p&gt; </li></ul>
  • 109. Floating
  • 110. Overlapping
  • 111. Floating <ul><li>A floated box can overlap boxes adjacent to it in the normal flow. </li></ul>
  • 112. Floating <ul><li>&lt;p&gt; &lt;span style=&amp;quot; float:right; &amp;quot;&gt; This span is floated right. &lt;/span&gt; This is the first paragraph. &lt;/p&gt; </li></ul><ul><li>&lt;p&gt; This is the second paragraph. &lt;/p&gt; </li></ul>
  • 113. Unhappy?
  • 114. Clear it!
  • 115. Clearing <ul><li>&lt;p&gt; &lt;span style=&amp;quot; float:right; &amp;quot;&gt; This span is floated right. &lt;/span&gt; This is the first paragraph. &lt;/p&gt; </li></ul><ul><li>&lt;p style=&amp;quot; clear:right; &amp;quot;&gt; This is the second paragraph. &lt;/p&gt; </li></ul>
  • 116. OR
  • 117. Clearing <ul><li>&lt;p&gt; &lt;span style=&amp;quot; float:right; &amp;quot;&gt; This span is floated right. &lt;/span&gt; This is the first paragraph. &lt;/p&gt; </li></ul><ul><li>&lt; br style=&amp;quot; clear:right; &amp;quot; /&gt; </li></ul><ul><li>&lt;p&gt; This is the second paragraph. &lt;/p&gt; </li></ul>
  • 118. Clearing
  • 119. Still unhappy?
  • 120. Clearing <ul><li>&lt;p&gt; &lt;span style=&amp;quot; float:right; &amp;quot;&gt; This span is floated right. &lt;/span&gt; This is the first paragraph. &lt; br style=&amp;quot; clear:right; &amp;quot; /&gt; &lt;/p&gt; </li></ul><ul><li>&lt;p&gt; This is the second paragraph. &lt;/p&gt; </li></ul>
  • 121. Clearing
  • 122. Or, better ...
  • 123. Clearing <ul><li>&lt;p style=&amp;quot; overflow:auto; &amp;quot;&gt; &lt;span style=&amp;quot; float:right; &amp;quot;&gt; This span is floated right. &lt;/span&gt; This is the first paragraph. &lt;/p&gt; </li></ul><ul><li>&lt;p&gt; This is the second paragraph. &lt;/p&gt; </li></ul>
  • 124. Clearing
  • 125. If you get scroll bars...
  • 126. Clearing
  • 127. Do this...
  • 128. Clearing <ul><li>&lt;p style=&amp;quot; overflow:hidden; &amp;quot;&gt; &lt;span style=&amp;quot; float:right; &amp;quot;&gt; This span is floated right. &lt;/span&gt; This is the first paragraph. &lt;/p&gt; </li></ul><ul><li>&lt;p&gt; This is the second paragraph. &lt;/p&gt; </li></ul>
  • 129. To get this...
  • 130. Clearing
  • 131. Still unhappy?
  • 132. Play Solitaire!
  • 133. Multiple floats
  • 134. Multiple floats <ul><li>&lt;p&gt; </li></ul><ul><ul><ul><li>&lt;span style=&amp;quot; float:right; &amp;quot;&gt; first span </li></ul></ul></ul><ul><ul><ul><li>&lt;/span&gt; </li></ul></ul></ul><ul><ul><ul><li>&lt;span style=&amp;quot; float:right; &amp;quot;&gt; second span </li></ul></ul></ul><ul><ul><ul><li>&lt;/span&gt; </li></ul></ul></ul><ul><li>This is my paragraph. </li></ul><ul><li>&lt;/p&gt; </li></ul>
  • 135. Multiple floats
  • 136. Clearing
  • 137. Multiple floats <ul><li>&lt;p&gt; &lt;span style=&amp;quot; float:right; &amp;quot;&gt; first span. &lt;/span&gt; &lt;span style=&amp;quot; clear:right; float:right; &amp;quot;&gt; second span. &lt;/span&gt; This is my paragraph. &lt;/p&gt; </li></ul>
  • 138. Multiple floats
  • 139. Fonts
  • 140. A browser can only display the fonts that are installed on its machine.
  • 141. Fonts <ul><li>Include one of the generic font face keywords at the end of any font list: </li></ul><ul><li>body{ </li></ul><ul><li>font-family: Verdana, Arial, sans-serif ; </li></ul><ul><li>} </li></ul>
  • 142. Firefox bug!
  • 143. Firefox resizes heading elements when you specify a font size for the container
  • 144. Solution
  • 145. Always specify font size for heading elements (h1, h2, .., h6)
  • 146. Sizing heading elements <ul><li>H1 {font-size:24px} </li></ul><ul><li>H2 {font-size:18px} </li></ul><ul><li>H3 {font-size:15px} </li></ul><ul><li>H4 {font-size:12px} </li></ul>
  • 147. Form elements don&apos;t inherit font properties, enforce them to do so
  • 148. Font inheritance <ul><li>body { font-size: 18px; font-family: Verdana; </li></ul><ul><li>} </li></ul><ul><li>input, select, textarea { font-size: 100%; font-family: inherit ; </li></ul><ul><li>} </li></ul>
  • 149. Using em
  • 150. What is em? <ul><li>Wikipedia: </li></ul><ul><li>In metal type, the em was the height of the metal body from which the letter rises. </li></ul><ul><li>(c in this illustration) </li></ul>
  • 151. What is em? <ul><li>In typography, em is a unit of measurement, equals to the point size of the current font </li></ul><ul><li>em is not related to a specific typeface, and thus is the same for all fonts at a given point size. </li></ul>
  • 152. Why?
  • 153. <ul><ul><li>IE 6 will not allow readers to resize text that has been sized in pixels! </li></ul></ul>
  • 154. Using ems <ul><li>The default size for ‘medium’ text in all browsers is 16px </li></ul><ul><li>Now, you should convert px sizes to em: 10px =&gt; 0.625em 16px =&gt; 1em 20px =&gt; 1.25em 24px =&gt; 1.5em ... </li></ul>
  • 155. Still want to think in pixels?
  • 156. Solution http://www.clagnut.com
  • 157. Using ems <ul><li>1)Reduce this size for the entire document: to 10px: body {font-size:62.5%} </li></ul><ul><li>( 10 / 16 ) * 100 = 62.5 </li></ul><ul><li>2)Think in pixels: 10px =&gt; 1em 12px =&gt; 1.2em 8px =&gt; 0.8em </li></ul>
  • 158. But remember, em is relative
  • 159. em is relative <ul><li>body {font-size:62.5%} </li></ul><ul><ul><li>#footer {font-size:1.2em} /*12px*/ </li></ul></ul><ul><li>#footer p {font-size:1em} /*12px*/ </li></ul><ul><li>#footer h3 {font-size:1.5em} /*18px*/ </li></ul>
  • 160. Discussion
  • 161. Example
  • 162. Example <ul><li>&lt;p&gt; Lorem ipsum dolor sit ... &lt;/p&gt; </li></ul><ul><li>&lt;ul id=&amp;quot;navigation&amp;quot;&gt; &lt;li class=&amp;quot;left&amp;quot;&gt; &lt;a href=&amp;quot;/back&amp;quot;&gt; Back &lt;/a&gt; &lt;/li&gt; &lt;li class=&amp;quot;right&amp;quot;&gt; &lt;a href=&amp;quot;/next&amp;quot;&gt; Next &lt;/a&gt; &lt;/li&gt; </li></ul><ul><li>&lt;/ul&gt; </li></ul>
  • 163. Example
  • 164. Example <ul><li>.left { float: left; } </li></ul><ul><li>.right { float: right; } </li></ul><ul><li>#navigation { list-style-type: none; margin: 0; padding: 0.5em 0; border-top: 1px solid #666; </li></ul><ul><li>} </li></ul>
  • 165. Example
  • 166. Example <ul><li>#navigation li a { display: block; width: 5em; color: #FFF; background-color: #036; padding: .2em 0; text-align: center; text-decoration: none; </li></ul><ul><li>} </li></ul>
  • 167. Example
  • 168. Example <ul><li>ul#navigation li a:hover { color: #FFF; background-color: #69C; </li></ul><ul><li>} </li></ul>
  • 169. The End
  • 170. References
  • 171. References <ul><li>http://www.w3.org/ </li></ul><ul><li>http://www.w3schools.com/ </li></ul><ul><li>http://www.sitepoint.com/ </li></ul><ul><li>http://css.maxdesign.com.au/ </li></ul><ul><li>http://www.smashingmagazine.com/ </li></ul>
  • 172. Thank You! tadsessions.espace.com.eg Hatem Mahmoud [email_address]

×