HTML Starter Template
Jan 19, 2012 | In Miscellaneous, Snippets |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"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>TITLE OF THE PROJECT HERE</title> <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"> </head> <body> </body> </html>
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.
CSS:
/* http://meyerweb.com/eric/tools/css/reset/
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: twitter.com/miketaylr/status/12228805301
* Also: hot pink!
*/
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* ========================================
Links
======================================*/
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!