Skip navigation

So every time I start a new development I grab the standard templates and resets and get going. Now the other day I was out and about without my flashdrive and so had to hunt around for some templates rather then code up from scratch. In the end it took me 15 minutes to find what I was looking for and so saved me every little time if any.

So I thought for future reference I would add some basic templates to my blog so I can find them easily if I am caught short in the future. Hope you can make some good use of them.

Generic XHTML template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" /> <script src="" type="text/javascript"></script> <!-- google hosted --> <script type="text/javascript" src="common.js"></script> </head> <body> <div id="container"> <div id="header"> </div> <div id="wrapper"> <div id="main"> </div> </div> <div id="footer"> </div> </div> </body> </html>

CSS template with Eric Meyer’s Reset

/* index -------------------------------------------------------------------------------------- */ /* * Filename: style.css * Description: global CSS (master) * Version: 1.0.0 (YYYY-MM-DD) * Website: website-url * Author: authorname == STRUCTURE ============================================================================ * Page width: 990 px * Number of columns: 1 */ /* colorscheme --------------------------------------------------------------------------------------- */ /* white (bg): #fff grey (intro text): #333 grey (h3 headlines +contact bg) #a3a3a3 black (text): #000 red (link active): #670001 dark red (link hover + visited): #431611 */ /* Browser CSS-Reset --------------------------------------------------------------------------------------- */ /* Eric Meyer's Reset Reloaded */ /* */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus {outline: 0;} body { line-height: 1; color: white; background: black; } ol, ul {list-style: none;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} /* images and linked images without border */ img, a img {border: 0;} /* globals --------------------------------------------------------------------------------------- */ html {background: #fff;} body { background: #fff url(image.jpg) no-repeat left top; color: #000; display: table; font-size: 100%; /* reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px. */ width: 100%; /* This rule is primarily there for Internet Explorer 6 and below on Windows */ } html>body { font-size: 16px; /* sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera */ } a { border-bottom: 1px solid #670001; padding-bottom: 1px; text-decoration: none; } a:link, a:visited {color: #670001;} a:hover { background: #431611; border-bottom: 0; color: #fff; } /* Typography --------------------------------------------------------------------------------------- */ p { font: 1em/1.75em Georgia, "Times New Roman", Times, serif; margin: 0; text-indent:0; } p+p {text-indent:2em;} .first {text-indent: 0;} h1 { border-bottom: 1px dotted #a3a3a3; font: 3em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; font-weight: bold; margin-top: 80px; margin-left: 310px; margin-bottom: 1em; padding:0 30px 30px 20px; } h2 { font: 2.5em/1.75em Georgia, "Times New Roman", Times, serif; margin-top: 1em; margin-bottom: 0em; } h3 { color: #a3a3a3; font: 1.88em/0.934em Georgia, "Times New Roman", Times, serif; margin-top: 1.068em; margin-bottom: 0em; } h4 { color: #fff; font: 2em/1.5em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; } h5 {color: #ccc; font: 1.25em/1.75em Georgia, "Times New Roman", Times, serif;} .amp { font: 1em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif; font-style: italic; } /* use the best Ampersand */ /* layout elements --------------------------------------------------------------------------------------- */ /* wrapper */ /* nav */ /* content */ /* footer */ /* end of this stylesheet -------------------------------------------------------------------------------------- */


  1. hello,

    thanks for the great quality of your blog, each time i come here, i’m amazed.

    black hattitude.

  2. Thanks for the words of encouragement. Did you find the templates useful? I am thinking I should have put them up as downloadable templates files. Will try and do that soon.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: