Cascading Style Sheets - Part 02

5,914
-1

Published on

CSS Guidelines

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

No notes for slide

Cascading Style Sheets - Part 02

  1. 1. Cascading Style Sheets Hatem Mahmoud [email_address]
  2. 2. Part 2
  3. 3. Quick Review
  4. 4. I don't hate Microsoft
  5. 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. 6. What is CSS? <ul><li>CSS separates the presentation from the content </li></ul>
  7. 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. 8. Need for Guidelines
  9. 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. 10. How?
  11. 11. 1) Establish a set of rules
  12. 12. 2) Document those rules
  13. 13. 3) Enforce their use
  14. 14. Thank You!
  15. 15. wait
  16. 16. General Guidelines
  17. 17. Respect major browsers IE 6+ Firefox 2+ Safari 3+
  18. 18. Major Browsers (6, 2008) <ul><li>Source: http://www.w3schools.com/browsers/ </li></ul>
  19. 19. Don't ignore IE 6
  20. 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. 21. IE7.js
  22. 22. IE7.js Hot Link <ul><li><!--[if lt IE 7]> </li></ul><ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot; http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js &quot; > </li></ul></ul></ul><ul><ul><ul><li></script> </li></ul></ul></ul><ul><li><![endif]--> </li></ul>
  23. 23. Use semantic markup
  24. 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: <div> , <span> , <label> , <p> , <br/> , <h2> , <th> , <td> , <ul> , <ol> , <li> , ... </li></ul><ul><li>Don't nest blocks inside inline elements: <span><p> incorrect </p></span> </li></ul>
  25. 25. Do not use tables for layout, they were made for tabular data
  26. 28. Always use Web-safe fonts (Common fonts to all versions of Windows and Mac)
  27. 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>
  28. 30. When possible, use transparent GIFs instead of transparent PNGs
  29. 31. Never resize images in CSS or HTML, they would look ugly
  30. 32. Make your site accessible and usable for all users and devices
  31. 33. Accessibility & 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 &quot;click here&quot;) </li></ul><ul><li>Ensure that the color combinations have an adequate contrast </li></ul><ul><li>Don't expect the user to use a mouse! </li></ul>
  32. 34. Validate your markup http://validator.w3.org/
  33. 35. Validate your CSS http://jigsaw.w3.org/css-validator/
  34. 36. CSS Guidelines
  35. 37. Avoid inline styles
  36. 38. Avoid inline styles <ul><li>Bad </li></ul><ul><li><p style=&quot; color:red;margin:0; &quot;> My poor paragraph. </p> </li></ul><ul><li>Good </li></ul><ul><li><link href=&quot;screen.css&quot; media=&quot;screen&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /> </li></ul>
  37. 39. Avoid fancy CSS3 selectors
  38. 40. Compress your CSS http://www.cssdrive.com/
  39. 41. Coding Tips
  40. 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>
  41. 43. Coding Tips <ul><li>3) Divide into specific sections: </li></ul><ul><li>/*--->>> GLOBAL <<<---*/ </li></ul><ul><li>... </li></ul><ul><li>/*--->>> HEADER <<<---*/ </li></ul><ul><li>... </li></ul><ul><li>/*--->>> FOOTER <<<---*/ </li></ul><ul><li>... </li></ul>
  42. 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>
  43. 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>
  44. 46. Coding Tips <ul><ul><li>6) Surround embedded styles, if needed, with HTML comment characters to hide from older browsers: <head> <!-- <style type=&quot;text/css&quot;> h1 {color:blue;} </style> --> </head> </li></ul></ul>
  45. 47. Organize your CSS
  46. 48. How?
  47. 49. Use a framework typography.css, grid.css, layout.css, form.css, etc.
  48. 51. Or design your own
  49. 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>
  50. 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>
  51. 54. Organize your CSS <ul><li>3) Link to the master CSS file: </li></ul><ul><li>template.html </li></ul><ul><li><link href=&quot; master.css &quot; media=&quot;screen&quot; rel=&quot;Stylesheet&quot; type=&quot;text/css&quot; /> </li></ul>
  52. 55. Why?
  53. 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>
  54. 57. CSS Reset
  55. 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>
  56. 59. Solution?
  57. 60. Begin with a few default styles
  58. 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>
  59. 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>
  60. 63. Keep a library of helpful classes
  61. 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>
  62. 65. Techniques
  63. 66. Avoid CSS Hacks!
  64. 67. Box Model Bug
  65. 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><div id=&quot;sidebar&quot;> </li></ul><ul><ul><ul><li><div id=&quot;news&quot;> News </div> </li></ul></ul></ul><ul><li></div> </li></ul>
  66. 69. IE Hacks <ul><li>Use IE Conditional Comments to link to a different CSS file: </li></ul><ul><li><!--[if IE 5]> <link href=&quot;ie5.css” type=&quot;text/css&quot;> <![endif]--> </li></ul>
  67. 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>
  68. 71. Targeting different media types
  69. 72. <link type=&quot;text/css&quot; href=&quot;screen.css&quot; media=&quot; screen &quot; />
  70. 74. <link type=&quot;text/css&quot; href=&quot;print.css&quot; media=&quot; print &quot; />
  71. 76. Supported values: all , aural , braille , embossed , handheld , print , projection , screen , tty , tv
  72. 77. Default value: all
  73. 78. Alternative Style Sheets
  74. 79. A document can link to multiple style sheets
  75. 80. You can give it a default style and any number of alternatives for the user to choose from
  76. 81. How to choose one?
  77. 82. Some browsers support it
  78. 83. Alternative Style Sheets
  79. 84. Some browsers don't ;)
  80. 85. How to create them?
  81. 86. Using the right rel and title attributes
  82. 87. 1) Persistent style sheets
  83. 88. Linked without a title attribute and always applied
  84. 89. <link type=&quot;text/css&quot; href=&quot;main.css&quot; rel=&quot;stylesheet&quot; /> Persistent style sheets
  85. 90. Persistent style sheets
  86. 91. 2) Preferred style sheets
  87. 92. Linked with a title attribute and selected by default
  88. 93. <link type=&quot;text/css&quot; href=&quot;green.css&quot; rel=&quot;stylesheet&quot; title=&quot; Green &quot; /> Preferred style sheets
  89. 94. Preferred style sheets
  90. 95. 3) Alternate style sheets
  91. 96. Linked with a title attribute, and the rel attribute should be set to “ alternate stylesheet “
  92. 97. <link type=&quot;text/css&quot; href=&quot;orange.css&quot; rel=&quot;alternate stylesheet&quot; title=&quot; Orange &quot; /> Alternate style sheets
  93. 98. Alternate style sheets
  94. 99. Not cross-browser?
  95. 100. Use JavaScript
  96. 101. Alternative Style Sheets
  97. 102. Floating
  98. 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>
  99. 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>
  100. 105. Floating
  101. 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>
  102. 107. Example
  103. 108. Floating <ul><li><p> </li></ul><ul><li><span style=&quot; float:right; &quot;> This span is floated right. </span> </li></ul><ul><li>This is my paragraph. This is my paragraph. This is my paragraph. </li></ul><ul><li></p> </li></ul>
  104. 109. Floating
  105. 110. Overlapping
  106. 111. Floating <ul><li>A floated box can overlap boxes adjacent to it in the normal flow. </li></ul>
  107. 112. Floating <ul><li><p> <span style=&quot; float:right; &quot;> This span is floated right. </span> This is the first paragraph. </p> </li></ul><ul><li><p> This is the second paragraph. </p> </li></ul>
  108. 113. Unhappy?
  109. 114. Clear it!
  110. 115. Clearing <ul><li><p> <span style=&quot; float:right; &quot;> This span is floated right. </span> This is the first paragraph. </p> </li></ul><ul><li><p style=&quot; clear:right; &quot;> This is the second paragraph. </p> </li></ul>
  111. 116. OR
  112. 117. Clearing <ul><li><p> <span style=&quot; float:right; &quot;> This span is floated right. </span> This is the first paragraph. </p> </li></ul><ul><li>< br style=&quot; clear:right; &quot; /> </li></ul><ul><li><p> This is the second paragraph. </p> </li></ul>
  113. 118. Clearing
  114. 119. Still unhappy?
  115. 120. Clearing <ul><li><p> <span style=&quot; float:right; &quot;> This span is floated right. </span> This is the first paragraph. < br style=&quot; clear:right; &quot; /> </p> </li></ul><ul><li><p> This is the second paragraph. </p> </li></ul>
  116. 121. Clearing
  117. 122. Or, better ...
  118. 123. Clearing <ul><li><p style=&quot; overflow:auto; &quot;> <span style=&quot; float:right; &quot;> This span is floated right. </span> This is the first paragraph. </p> </li></ul><ul><li><p> This is the second paragraph. </p> </li></ul>
  119. 124. Clearing
  120. 125. If you get scroll bars...
  121. 126. Clearing
  122. 127. Do this...
  123. 128. Clearing <ul><li><p style=&quot; overflow:hidden; &quot;> <span style=&quot; float:right; &quot;> This span is floated right. </span> This is the first paragraph. </p> </li></ul><ul><li><p> This is the second paragraph. </p> </li></ul>
  124. 129. To get this...
  125. 130. Clearing
  126. 131. Still unhappy?
  127. 132. Play Solitaire!
  128. 133. Multiple floats
  129. 134. Multiple floats <ul><li><p> </li></ul><ul><ul><ul><li><span style=&quot; float:right; &quot;> first span </li></ul></ul></ul><ul><ul><ul><li></span> </li></ul></ul></ul><ul><ul><ul><li><span style=&quot; float:right; &quot;> second span </li></ul></ul></ul><ul><ul><ul><li></span> </li></ul></ul></ul><ul><li>This is my paragraph. </li></ul><ul><li></p> </li></ul>
  130. 135. Multiple floats
  131. 136. Clearing
  132. 137. Multiple floats <ul><li><p> <span style=&quot; float:right; &quot;> first span. </span> <span style=&quot; clear:right; float:right; &quot;> second span. </span> This is my paragraph. </p> </li></ul>
  133. 138. Multiple floats
  134. 139. Fonts
  135. 140. A browser can only display the fonts that are installed on its machine.
  136. 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>
  137. 142. Firefox bug!
  138. 143. Firefox resizes heading elements when you specify a font size for the container
  139. 144. Solution
  140. 145. Always specify font size for heading elements (h1, h2, .., h6)
  141. 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>
  142. 147. Form elements don't inherit font properties, enforce them to do so
  143. 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>
  144. 149. Using em
  145. 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>
  146. 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>
  147. 152. Why?
  148. 153. <ul><ul><li>IE 6 will not allow readers to resize text that has been sized in pixels! </li></ul></ul>
  149. 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 => 0.625em 16px => 1em 20px => 1.25em 24px => 1.5em ... </li></ul>
  150. 155. Still want to think in pixels?
  151. 156. Solution http://www.clagnut.com
  152. 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 => 1em 12px => 1.2em 8px => 0.8em </li></ul>
  153. 158. But remember, em is relative
  154. 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>
  155. 160. Discussion
  156. 161. Example
  157. 162. Example <ul><li><p> Lorem ipsum dolor sit ... </p> </li></ul><ul><li><ul id=&quot;navigation&quot;> <li class=&quot;left&quot;> <a href=&quot;/back&quot;> Back </a> </li> <li class=&quot;right&quot;> <a href=&quot;/next&quot;> Next </a> </li> </li></ul><ul><li></ul> </li></ul>
  158. 163. Example
  159. 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>
  160. 165. Example
  161. 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>
  162. 167. Example
  163. 168. Example <ul><li>ul#navigation li a:hover { color: #FFF; background-color: #69C; </li></ul><ul><li>} </li></ul>
  164. 169. The End
  165. 170. References
  166. 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>
  167. 172. Thank You! tadsessions.espace.com.eg Hatem Mahmoud [email_address]

×