Design Lunatic

HTML Starter Template

Whenever we designers start a new HTML/CSS project, we have to create a new HTML file, open it, and write in some basic code to get started. Next, we create a reference to a stylesheet. We then have to open up the stylesheet and type in a basic CSS reset. Today, I’ll share with you my personal starter template.

Here’s the HTML:

<!doctype html>
<html lang="en">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="style.css">


There’s an HTML5 doctype declaration, some basic meta tags, a title element, and a reference to a CSS file. This code is a great time saver.


   v2.0 | 20110126
   License: none (public domain)

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
table {
	border-collapse: collapse;
	border-spacing: 0;

 * These selection declarations have to be separate
 * No text-shadow:
 * Also: hot pink!

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

/* ========================================

a:hover, a:active { outline: 0; }

	Main Styles
body {
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;

This CSS includes Eric Meyer’s CSS reset, styles the highlight color to be pink, gives links some simple styles, and makes the text on the page 15px Arial with 25px line height. Of course, if you don’t like Arial, or don’t like this particular font size, you can always customize this starter template and make your own. This is meant to be customized to your own needs.

If you have any questions or comments, feel free to post them below!

  • Ivan Wang

    LOL this is very handy

  • Infoman4ever

    Just what I was looking for. Thanks!

  • Afif Najib


  • Graham

    finally someone who uses /*========== for comment headers…. it’s genius I just wish you could put anchors in css and then I would add a contents page.