Efficient css

Efficient Maintainable, Modular By Gopinath Ambothi CSS

1 Use external style sheets instead of inline or header styles.

<!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>

<!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>

<!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>

2 Use link rather than @import for IE & NN4

<!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>

<!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>

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; }

body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }

h1 { color: #236799; } h2 { color: #236799; } h3 { color: #236799; } h4 { color: #236799; }

h1, h2, h3, h4 { color: #236799; }

p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; }

p { margin: 0 0 1em; background: #ddd; color: #666; }

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; }

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; }

Place a time stamp, author and notation at top of CSS files. 1

/* --------------------------------- Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------- */

Include global color notation 2

/* --------------------------------- 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 --------------------------------- */

Use meaningful names for IDs & classes 3

.green-box { ... } #big-text { ... }

.pullquote {... } #introduction {... }

#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 { ... }

Add clear comments to your CSS files 5

/* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... }

Modular CSS (to be continued…)

Efficient css

Recommended

Recommended

More Related Content

Featured

Featured (20)

Efficient css