Efficient css
- 4. 1 Use external style sheets instead of inline or header styles.
- 6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style= " co lor: red " > ... </p> </body> </html>
- 8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> p { color: red; } </style> </head> <body> ... </body> </html>
- 10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </body> </html>
- 11. 2 Use link rather than @import for IE & NN4
- 13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> @import url("styles.css"); </style> </style> </head> <body> ... </body> </html>
- 15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>
- 18. p { font-family: arial, helvetica, sans-serif; } #container { font-family: arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
- 20. body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
- 21. 4 Use multiple selectors
- 23. h1 { color: #236799; } h2 { color: #236799; } h3 { color: #236799; } h4 { color: #236799; }
- 26. 5 Use multiple declarations
- 28. p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; }
- 30. p { margin: 0 0 1em; background: #ddd; color: #666; }
- 31. 6 Use shorthand properties
- 33. body { font-size : 85%; font-family : arial, helvetica, sans-serif; background-image : url(image.gif); background-repeat : no-repeat; background-position : 0 100%; margin-top : 1em; margin-right : 1em; margin-bottom : 0; margin-left : 1em; padding-top : 10px; padding-right : 10px; padding-bottom : 10px; padding-left : 10px; border-style : solid; border-width : 1px; border-color : red; color : #222222; }
- 35. body { font : 85% arial, helvetica, sans-serif; background : url(image.gif) no-repeat 0 100%; margin : 1em 1em 0; padding : 10px; border : 1px solid red; color : #222; }
- 37. Place a time stamp, author and notation at top of CSS files. 1
- 40. /* --------------------------------- COLORS Body background: #def455 Container background: #fff Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 --------------------------------- */
- 47. #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation { ... } #navigation ul { ... } #navigation ul li { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... }
- 49. /* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... }
