Bill Brown TheHolierGrail.com

2. Laying the Foundation Websites come from a dysfunctional family. Your HTML source is the foundation of your site. The better the foundation, the more effectively this dysfunctional family can communicate.

3. DOCTYPE The !DOCTYPE declaration tells the browser which flavor of HTML you're using. Without it, browsers have to guess. Some browsers didn't do so well on their SATs. They guess wrong.

4. Standards Definitions are standards. Standards are definitions. Not choosing a set of definitions leaves your site vulnerable to interpretation.

5. Does �X� Mark the Spot? The first of two questions related to DOCTYPE is whether or not you are using XHTML. No current version of Internet Explorer processes XHTML correctly. I advise against it.

6. Strict v. Transitional The second question is whether you will use Strict or Transitional. Newly created documents or sites should use Strict. Archived or legacy documents should use Transitional.

7. Validation You validate your site to ensure that you're living up to the standards you've set in your DOCTYPE. A great many CSS rendering errors can be squelched in this step alone.

8. <B>ed & <BR>eakfast Code Just because your site validates doesn't mean your job is done. Using <b> instead of <strong>. Or worse instead of <h*> tags. ...can create havoc later on.

9. CSS Reset Sets default styles for all tags. Some love em, some hate 'em. The effectiveness of resetting the browser's default style choices often depends on the complexity of the build.

10. CSS Frameworks A pre-packaged library of styles intended to make standards-compliant coding easier and more accessible.

11. The Debate Possibly bloated code. Used as a cure-all by designers who don't understand CSS. Flexibility and limitations.

12. The Holy Grail Three columns, often with fixed width sidebars and fluid center. Allows Content column to appear first in source. Any column may be the longest. Semantically slim, CSS lean. See demo.

13. The Holier Grail Rules of semantics applied less zealously. Has several one, two, and three column formats. Uses several different layouts. Same source code. See demo.

14. Styling for JavaScript Class the HTML element. Class the BODY element. Include external style sheet. style=�property:value� overrides all CSS styles except !important. See demo.

15. External Style Sheets In large projects, scripted styles might be stored in a separate style sheet for ease of maintenance. These style sheets may be included with simple JavaScript.

16. Classes or Inline Style? Re-classing an element in the DOM takes longer than setting the style attribute of an element. Inline Styles have a specificity higher than all other CSS rules except !important ones.

17. HTTP Requests HTTP requests are expensive. �80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.� - Yahoo

18. The Problem Large websites or sites using CSS Frameworks with lots of external files will see a dramatic slowing of initial site display. Affects @import, <link>, <script>, url(), <img>.

19. Caching In Creation of sub-domains for hosting support files can help with this process. css.domain.com � CSS Files js.domain.com � JS files img.domain.com - Images

20. Rounded Corners Rounded corners are popular features on sites these days. Widespread support for border-radius is years away. Support for border images is also likely to be unavailable for a while.

21. Square Hole, Round Pegs Monitors are square. Browsers are square. Paper is square. Seems that only recently have we become aware that a screen is not paper.

22. With Images See demo.

23. Without Images See demo.

24. Sprite Backgrounds Fewer HTTP requests Less overhead for graphics Requires significant work before it can be implemented Effect is often ruined by font resizing

25. Creating Sprites Generally done with a graphic editor like Photoshop or GIMP. Requires a good deal of setup time. Maintenance is difficult without native graphic files.

26. Using Sprites See demo.

27. More Caching In Using sprites not only reduces the amount of initial HTTP requests, it also caches images for future use. Sprites are generally recommended for large sites like Yahoo or Google.

28. Tabbed Panels Less popular as a static HTML element with the advent of AJAX. Can actually be used for static and dynamic content. Requires JavaScript to be truly effective in a live site.

29. Ten Pounds of Stuff Great for Login/Registration. Also functions well as a tabbed menu interface. Popular news stories or articles. Oh, how we love to cram.

30. CSS Only See demo.

31. A Little JavaScript Better with some scripting... See demo.

32. Vertical Centering CSS vertical-align:middledoesn't do what you think it does. vertical-align:middle works for <img> and <td>. Block element centering requires wrappers.

33. Known Height See demo.

34. Unknown Height See demo.

35. Evil Takes Form Developers hate forms. Designers hate forms. Users hate forms. Forms are the fundamental method in which a user communicates with a website.

36. Where Forms Went Wrong Many form elements are replaced by the browser or the operating system. Redundant design:<select>, radio buttons and checkboxes. Virtually impossible to achieve cross-browser consistency.

37. Beyond Your Control <legend> element, while serving a key role in accessibility breaks on nearly every browser. Styling of form elements can be disabled in IE. Many advise against styling the appearance of form elements.

38. Making Due See demo.

39. Turning the Tables Tables are intended to use tabular data. They were NEVER intended for layout, while it was accepted in some situations. Use tables to display your site's tabular data.

40. Never, EVER Use Tables... Using <tables> means you can't sit with the cool kids at the lunch table. They make it easier to create an inaccessible website. They actually lessen your ability to effectively style your site. Search engines and screen readers don't handle tables as well as they do semantic code.

41. Except... When you have to. Knowing the rules means you can break the rules � this is different than blind ignorance. And of course...when displaying tabular data.

42. Your Site is Not Tabular Data A site stored in a database still displays a single page at a time. Displaying a single record does not tabular data make... A check in your checkbook is not in tabular format, nor are invoices, etc.

43. Table Styles <thead>, <tfoot>, <tbody> <col>, <colgroup> <caption> Tables are broken, too. See demo.

44. On the Menu If content is King, your menu is the Queen. Prominent placement. Hiding sub-menus? Your menu is a list, even if it's horizontal.

45. CSS Hover Menus Hover is a behavior which is perhaps best handled by JavaScript. CSS Hover menus are awful with a laptop touchpad. That being said...see demo.

46. Whatever:hover To support IE6, use whatever:hover. Use css expressions with caution. If you're using Prototype, jQuery, etc., capitalize on that rather than whatever:hover.

47. Bullet Replacement See demo.

48. Definition Lists My favorite tag family. See demos.

49. List Issues Cross-browser application of margin and padding is inconsistent. IE's white space bug

50. Image Replacement Techniques Confusing moniker. IRT is replacing a block of text with an alternate image, used to represent the text. Ideal for headers.

51. Why? Keeps markup clean. Theoretically makes a site more accessible. Some images are for style only and are not part of content.

52. The Many... FIR LIR YAIRM Phark Phark Revised Pixy's Solution

53. Many... TIP IFR SIFR Single Pixel Radu Method Leahy/Langridge

54. Methods Dwyer Method Glider/Levin Method Lindsay Method Shea Enhancement See demo.

55. Problems Images on, CSS off. Images off, CSS on. To hide or not to hide? Screen readers? A clever hacker can hide content in these blocks.

56. Drop Shadows Two main types. Text Shadowing. Box Shadowing. As with rounded corners, there is no convenient CSS rule currently in place cross-browser.

57. Text Shadowing See demo.

58. Box Shadows with Images See demo.

59. Box Shadows without Images See demo.

60. Better Opacity Several CSS options exist to handle opacity. IE uses a proprietary setting to achieve two different types of opacity.

61. The Problem The CSS opacity rule is inherited so child elements cannot be returned to full opacity with this rule. The same inheritance applies to IE's alpha filter.

62. The Solution The use of a combination of RGBA, PNG and IE's gradient filter on the background are often better. See demo.

63. Style Families CSS covers a lot of ground. It's often useful to create style families. Fonts, Forms, Layout, Format and Theme are some ways to group various styles.

64. Layout Layouts are often referred to as fixed-width, fluid-width, or elastic-width. Fixed width layouts are defined in pixels. Fluid width layouts use percents. Elastic width layouts are generally defined in ems.

65. Format Formats are generally referred to as being one, two, or three columns. Grid formats allow for a different manner of positioning elements, but can be volatile and react unexpectedly to font sizes.

66. Theme De-coupling your theme from your other style sheets has many benefits. Not the least of which is that you need change only one style sheet or set of styles to change the look of your site without breaking the layout or format.

67. Forms Forms, being so notoriously difficult to style are perhaps the best candidate for a style family. A default set of styles for form elements can save you a ton of headaches.

68. Scripted Elements Using a method to identify scripted elements will also save time and stress later on. Easier to style for printing. Helps eliminate FOUC.

69. Media Specific Styling Style sheets should specify whether they are meant for the screen, for printing, or for handhelds. Media queries will soon allow for more specific media targetting.

70. Screen, Projection Styles in a style sheet marked media=�screen, projection� do not affect the printed document. Make sure your scripted elements are in this style sheet or marked media=�screen, projection�

71. Print The importance of a Print Style Sheet cannot be overstated. Hide your menu, GoogleAds, other screen essential data. Show URLs for links. Be green: save paper.

72. Handheld More and more users are visiting your site with a Blackberry, iPhone or any one of the myriad of other small screen devices available. Make your site more accessible to them with a special style sheet.

73. Media Queries CSS3 extension to media types. Supported by Safari 3, Opera, and Firefox 3.1 (Alpha). @media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; }} Means an end to JavaScript checks for screen resolution.

74. Browser Troubleshooting Most of the browser bugs for CSS rendering are already documented. Check Google. If you're still having trouble, or want help checking on other browsers, try CSS-D.

75. Bug v. Lack of Support A bug is when a browser is doing something incorrectly. Lack of support is when it won't do it at all. Vastly different, though the appearance can be similar.

76. FOUC Flash of Unstyled Content. Occurs when a page is displayed without any style information, then is styled suddenly. Not only for IE. An external style sheet is the generally accepted fix.

77. Specificity(aka Weight aka Importance)? All CSS rules have a specificity which looks like this:A-B-C-D-E or 1,3,0,0,12 A = !important (add 1 for user !important)? B = inline styles C = element Ids D = classes, attribute, pseudo-classes E = tags * = 0. Not a base 10 system.

78. IE Background Image Caching No real CSS �cure.� Some JavaScript suggestions. HTAccess solutions exist. Pre-caching the images in other elements seems to work well.

79. The IE Toolkit display:inline position:relative hasLayout - zoom:1 - height:1% - #id {display:inline-block} #id {display:block} *

80. Conditional Comments Target Internet Explorer:<!--[if IE]><![endif]--> Target IE less than IE7:<!--[if lte IE 6]><![endif]--> Only works for IE5.5+

81. Why I Won't Hack Messy code. Unreliable. Better solutions exist. In many cases, modifying the HTML source code is a more robust solution.

82. Best Practices This list is culled from my own experience as well as the CSS-D list. There are no concrete rules. Knowing the rules means you can break the rules.

83. Semantic v. Pedantic Semantics means using only the right tag for the right content. Pedantic means the zealous application of the rule above. Pedantically speaking, tags like <div> and <span> serve no purpose. Realistically speaking, one can not always apply semantics.

84. CSS Signature Allows users to set customized style settings for your site. Also allows for tricks with specificity. CSS Signature:<body id=�myFancyWebsite�>

85. Minifying Two versions of style sheets Expanded, �pretty� development version with comments. Minified production version. Both serve a purpose. Minified sheets reduce the amount of download time.

86. Shorthand Syntax Background, border, font, margin, padding are all shorthand syntax. margin-top: 0margin-bottom: 1emmargin-left: automargin-right: auto ...is the same as margin:0 auto 1em

87. TRouBLed Borders The order of numbers in shorthand syntax is essential. They always occur in this order:Top, Right, Bottom, Left Except background-position, which uses:left/right top/bottom (center)?

88. LVHFA The order in which the pseudo-classes are defined can also be important to specificity. Best order:a:link, a:visited, a:hover, a:focus, a:active

89. Don't BelieveEverything You Read Not all the solutions available are the best solutions. There are still sources out there touting tables as the best way to control site layout. When asking for advice, take everything with a grain of salt.

90. Formatting Code During development, do not compact your code. Use a minifier to compact it when you're through but keep a formatted version. You will get more help and save yourself headaches if your code is readable.

91. Stealing Beauty No need to re-invent the wheel. If an elegant solution exists to a problem you're having, by all means, use it. Most solutions are published online for exactly that reason.

92. Practice, Practice, Practical CSS is deceptively easy to use. No need for special software or compiling. It can be tricky, however and like most things... You have to practice with it.

93. Testing 'Til it Hurts (or Breaks)? When you have a new site or new set of CSS rules...break them. Figure out what must be done to break your style. Decide if this is within your threshold. All designs break, even tabular ones.

94. Zero is Zero Most minifiers will do this for you, but for the record... 0px = 0% = 0em = 0 Mathematically speaking, zero of anything is zero. Save yourself some typing.

95. Print Style Sheet The importance of a print style sheet cannot be overstated. Stop creating javascript:print() links and capitalize on the power of CSS media. It's green.

96. K.I.S.S. Convoluded, complicated HTML and CSS solutions are rarely necessary. Keep your code formatted. Keep your code simple whenever possible.

97. Things to Avoid These are the things that you should never, ever do under any circumstances whatsoever... ...unless, of course, you have to.

98. body {font-size: 12px} Font sizes set in pixels can't be changed by IE users. Setting a font size lower than 100% assumes control of the user's browser in a way that is considered obtrusive.

99. body {line-height: 12px} This is a real bear to hunt down months later when you change font sizes on a site. The �px� is superfluous. Line-height:1.5 makes the line height 1.5 times the height of the font.

100. class=�big-red-left� What happens when the boss (or the client) wants this same box to be a small, centered box with a blue border? Classnames should relate to content, no style.

101. Bad Tags <b> - use <strong> <i> - use <em> <u> - underlining is for links use text-decoration if you need <marquee> - bad, bad, bad <blink> - worse, worse, worse

102. Copy-Paste, Copy-Paste...Copy-Whaaaa? Using a solution which already exists is fine...if you understand what it does. Avoid copy-paste without understanding what it is you're copying and pasting.

103. Frames??!! If you thought using tables kept you away from the cool kids table... Frames will get you beat up after school. Unnecessary, inaccessible and cumbersome to code.

104. #d1 #d2 #d3 ... {margin: 0} Specificity overkill. Harder to maintain. Difficult to override. Generally not needed.

105. �It Works in IE!?� Never code in Internet Explorer first, even if that's your primary audience. Like it or not, IE is the buggiest browser around with the lowest level of support for CSS styles. Use Firefox.

106. CSS3 Promises and Problems CSS has been around for years. The recent popularity of CSS2.1 has put increased pressure on the developers to create CSS3 Which means we'll be able to use...

107. All This Exciting Stuff New rules for borders. New rules for backgrounds. New rules for colors. New text effects. New rules for user interface. New selectors. And more...

108. Borders Multiple border colors. Border-imageand border-corner-image. Border-radius. Box-shadow.

109. Backgrounds Background-origin. Background-clip. Background-size. Multiple backgrounds.

110. Color HSL colors. HSLA colors. Opacity. RGBA colors.

111. Text Effects Text-shadow. Text-overflow. Word-wrap.

112. User Interface Box-sizing. Resize. Outline. Nav-top, nav-right, nav-bottom, nav-left.

113. Selectors [att^=val]Represents an element with the att attribute whose value begins with the prefix �val�. [att$=val]Represents an element with the att attribute whose value ends with the suffix �val�. [att*=val]Represents an element with the att attribute whose value contains at least one instance of the substring �val�.

114. Basic Box Model Overflow-x and overflow-y.

115. Other Modules Media queries. Multi-column layout. Web fonts. Speech.

116. ...That We Can't Use. Many modules still in working draft status. Even when they're complete, designers who need to support IE will likely be using workarounds for years to come.

117. Custom Troubleshooting Questions, comments and specific issues.

118. CSS Resources See CSS Resources handout.