1. .class { padding-left: 3px; margin-right: 6px; padding-top: 10px; padding-right: 9px; margin-left: 6px; background-image: url('images/happy.jpg'); background-position: bottom; background-repeat: repeat-x; background-color: #E2CCCC; } ------------------------------- CSS Shorthand is used to turn many CSS properties into one to make the file size smaller and a cleaner document. The above should be: .class { padding: 10px 9px 0 3px; margin: 0 6px; background: url('images/happy.jpg') repeat-x #E2CCCC bottom; } 2. a {color: #FF0;} a:visited {color: #F00;} <a name="myAnchor">don't like linking here</a> <a name="myAnchor1" href="#">do like linking here</a> ------------------------------------------- Users don't like linking to myAnchor, so should use pseudo-class :link: a:link {color: #FF0;} 3. p:first-child {font-weight: bold;} <div> <p>Hello</p> <p>Here I need font-weight bold</p> </div> ------------------------------------------- The common error is to assume that a selector like p:first-child will select the first child of a p element. p:first-child means p as first-child. (IE6 doesn't support :first-child) 4. body {font-size: 12px;} h1 {font: bold italic 1.2/200% sans-serif; } <body> <h1>Welcome</h1> </body> ------------------------------------------ The common error is to put line-height (1.2) before font-size (200%). Should be h1 {font: bold italic 200%/1.2 sans-serif; } 5. body {font-size: 10px;} div {line-height: 1em; } /* computed value */ p {font-size: 20px;} <div> <p>The computed line-height value of 10px was inherited by the paragraph from its parent div. This paragraph's font-size is 20px. This may cause the lines of text to overlap each other. </p> </div> -------------------------------------------- The computed line-height value of 10px was inherited by the paragraph from its parent div. This paragraph's font-size is 20px. This may cause the lineof text to overlap each other. Setting it a scaling factor will fix this problem because the scaling factor is an inherited value: div {line-height: 1; } /* inherited value */ It's better to set line-height using scaling factor in most cases. 6. <p>This paragraph has many spaces in it.</p> ------------------------------------ Should use: p {white-space: pre;} <p>This paragraph has many spaces in it.</p> Or: <pre>This paragraph has many spaces in it.</pre> 7. <a href="http://www.mysite.com" style="display: block> <p style="display: inline;">change display to be inline inside anchor</p> </a> --------------------------------------- A link cannot be wrapped around a paragraph. 8. You can t simply use { float: center; } to achieve that centered effect on block-level elements. You need to use { margin: 0 auto; } 9. Inline Styles (Embedded CSS) this would be a fast way to add CSS to your HTML documents, by adding your styles directly into your HTML tags. (i.e. <h1 style= color: #F00; >Welcome!</h1>) But, It doesn't separate content from presentation; It causes more maintenance headaches; It makes your pages bigger. 10. #selector { margin: 20px 0px; } --------------------------------------- There s no need to include the px after 0. 11. { color: red; } ----------------------------------- You should make sure it s the same color displayed across all browsers. Use Hexadecimal Instead of Color Names. 12. #selector { font-family: Helvetica; } ---------------------------------- Not Providing Fallback Fonts. Should be: #selector { font-family: Helvetica, Arial, sans-serif; } For background-image, we also need to specify a background-color (in case the image fails to load for some reason). 13. div#nav ul.myList li a.navLink { /* Styles go here */ } --------------------------------------------------- Overly specific CSS selectors don't do anyone any good. They take the browser longer to run. Should be #nav li a { /* Styles go here */ } |