This document provides guidelines for writing CSS code, including: 1. Separating presentation from content using CSS and validating markup and CSS. 2. Organizing CSS files by specific sections (e.g. typography.css, grid.css) and using a master CSS file to import other files. 3. Avoiding inline styles and CSS hacks, using semantic markup, and making sites accessible to all users.

1. Cascading Style Sheets Hatem Mahmoud [email_address]

2. Part 2

3. Quick Review

4. I don't hate Microsoft

8. Need for Guidelines

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+

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

23. Use semantic markup

25. Do not use tables for layout, they were made for tabular data

28. Always use Web-safe fonts (Common fonts to all versions of Windows and Mac)

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

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

39. Avoid fancy CSS3 selectors

40. Compress your CSS http://www.cssdrive.com/

41. Coding Tips

47. Organize your CSS

48. How?

49. Use a framework typography.css, grid.css, layout.css, form.css, etc.

51. Or design your own

55. Why?

57. CSS Reset

59. Solution?

60. Begin with a few default styles

63. Keep a library of helpful classes

65. Techniques

66. Avoid CSS Hacks!

67. Box Model Bug

71. Targeting different media types

72. <link type=&quot;text/css&quot; href=&quot;screen.css&quot; media=&quot; screen &quot; />

74. <link type=&quot;text/css&quot; href=&quot;print.css&quot; media=&quot; print &quot; />

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

105. Floating

107. Example

109. Floating

110. Overlapping

113. Unhappy?

114. Clear it!

116. OR

118. Clearing

119. Still unhappy?

121. Clearing

122. Or, better ...

124. Clearing

125. If you get scroll bars...

126. Clearing

127. Do this...

129. To get this...

130. Clearing

131. Still unhappy?

132. Play Solitaire!

133. Multiple floats

135. Multiple floats

136. Clearing

138. Multiple floats

139. Fonts

140. A browser can only display the fonts that are installed on its machine.

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)

147. Form elements don't inherit font properties, enforce them to do so

149. Using em

152. Why?

155. Still want to think in pixels?

156. Solution http://www.clagnut.com

158. But remember, em is relative

160. Discussion

161. Example

163. Example

165. Example

167. Example

169. The End

170. References

172. Thank You! tadsessions.espace.com.eg Hatem Mahmoud [email_address]