• Save
Cascading Style Sheets - Part 02
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,324
On Slideshare
5,165
From Embeds
2,159
Number of Embeds
17

Actions

Shares
Downloads
102
Comments
2
Likes
10

Embeds 2,159

http://how2designweb.wordpress.com 2,060
http://www.expressionlab.com 39
https://how2designweb.wordpress.com 25
http://intranet.espace.com.eg 6
http://www.hatemmahmoud.com 5
http://css-tips.us 3
http://csstips.org 3
http://prlog.ru 3
http://www.linkedin.com 2
http://csstip.blogspot.com 2
http://csstip.blogspot.in 2
http://www.slideshare.net 2
http://localhost 2
http://expressionlab.com 2
http://webcache.googleusercontent.com 1
https://www.linkedin.com 1
http://translate.googleusercontent.com 1

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