Coding a simple CSS template

Coding a simple CSS template
Difficulty: Easy
Description: Creating a simple, quick-loading CSS and XHTML valid template
Author: Daniel St. Jules; Date Added: 2007-04-11; Views: 14812

In this tutorial, I'll give a quick explanation as to how to code a CSS and XHTML valid template without the use of images and such. The template we'll be creating will be simple and quick-loading, although you, as a designer, will be able to use images of all sorts to improve the look. So, please click on the thumbnail below for a preview of what you'll end up with in the end, before applying your own creativity of course:
thumbnail

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Simple, quick loading CSS and XHTML valid template</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css"><!--

/* General styles */

* { margin: 0; padding: 0; }

body {
	background: #636363;
	font: 11px Verdana, Arial;
}

a:link,a:active,a:visited { text-decoration: none; color : #A6A6A6; }

a:hover		{ text-decoration: underline; color : #C1C1C1; }

p {  text-indent: 10px; margin-top: 20px; padding: 5px; background: #636363; }

h1 { padding: 5px; border-top: 4px solid #16B752; background: #474747; font: 2em Verdana; width: 3em; }

/* Layout styles */

#header {
	border-top: 8px solid #474747;
	font: bold 12px Verdana;
	text-align: center;
	padding: 20px;
	color: #444444;
}

#title1 { color: #3B99C9; }

#title2 { color: #16B752; }

.nav {
	font: 10px Verdana;
	height: 38px;
	text-align: right;
	border-bottom: 4px solid #3B99C9;
	background: #474747;
	margin-bottom: 40px;
}

.nav li { display: inline;  }

.nav li a, .nav li a:visited {
	color: #A6A6A6;
	width: 100px;
	padding: 20px 6px 6px 2px;
	text-decoration: none;
	height: 12px;
	float: left;
	text-align: right;
}

.nav li a:hover {
	color: #C1C1C1;
	background: #636363;
	border-bottom: 4px solid #16B752;
}

#content { padding: 5px 0; background: #474747; border-bottom: 4px solid #3B99C9;  }

//--></style>
</head>

<body>

<div id="header"><span id="title1">A CSS</span> <span id="title2">template</span></div>
<ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Portfolio</a></li>
</ul>

<h1>Home</h1>

<div id="content">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacus. Maecenas adipiscing velit ut tellus commodo pellentesque. Pellentesque sit amet ligula sed sapien venenatis semper. Cras congue. Donec ligula sapien, aliquam in, consectetuer tincidunt, tristique sed, ipsum. Donec mattis, neque et dictum consectetuer, justo ipsum dapibus purus, ac commodo quam odio id sapien. Nam commodo, nisi quis ornare bibendum, diam augue aliquet nisi, id consectetuer massa ante malesuada est. Aenean fermentum ultrices leo. Morbi imperdiet cursus ante. Proin facilisis auctor magna.</p>

	<p>Maecenas porttitor ipsum egestas diam. In in elit lacinia tellus tempus pharetra. Nunc commodo. Suspendisse potenti. Nulla aliquam risus eu velit. Aenean nisi risus, faucibus vitae, rutrum non, varius id, pede. In accumsan, tellus et pulvinar ultricies, augue eros interdum diam, ut consectetuer nisi felis quis nunc. Mauris blandit nonummy felis. In leo. Nunc placerat tempus ipsum. Suspendisse suscipit. Nunc tincidunt laoreet justo. Proin egestas sem quis ante. Vestibulum et pede. Praesent volutpat tempor enim. Suspendisse sit amet velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet.</p>
</div>

</body>
</html>		
		

Above is all the code needed for the creation of the layout. I'll break it down into parts and explain the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Simple, quick loading CSS and XHTML valid template</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Language" content="en-us" />

The first line specifies the Doctype of the page. The doctype (Document Type Declaration) appears at the top of a document in order to associate it with a Document Type Definition (DTD). The DTD basically lists which elements, tags, properties, etc, are allowed to be used within the document itself. In the case of this template, we're using XHTML 1.0 Transitional which is quite common.

The html tag is located in the second line and then the head tag on the third. The title tag allows a user to write a title for the page which will then be displayed in web browsers in various locations and in one's Taskbar. Next we specify the content-type of the document, which is, in this case, text/html, and then character encoding is specified. And in the 6th line of that excerpt, we specify the language: English, United States.

<style type="text/css"><!--

/* General styles */

* { margin: 0; padding: 0; }

body {
	background: #636363;
	font: 11px Verdana, Arial;
}

a:link,a:active,a:visited { text-decoration: none; color : #A6A6A6; }

a:hover		{ text-decoration: underline; color : #C1C1C1; }

p {  text-indent: 10px; margin-top: 20px; padding: 5px; background: #636363; }

h1 { padding: 5px; border-top: 4px solid #16B752; background: #474747; font: 2em Verdana; width: 3em; }

/* General styles */ is simply a comment within the CSS, so it doesn't do anything. Then we have the * { margin: 0; padding: 0; } which states that the default margin and padding for all elements on a page is 0. This is useful as the default values vary from browser to browser, so now it'll all be the same. Next we specify the background colour of the body with a hex colour. Next we specify the font size and family which will be used throughout the document. In this case we've specified for the text to be 11px in size, and for the family to be Verdana by default. We then specified a secondary font, which in this case is Arial, the in the case that the first one isn't installed. Why Arial wouldn't be installed, however, is beyond me.

Next we specify the style of links in three different states: the default state, when the link is being clicked, and one which has already been selected. We simply specify the colour of the links with the color property and a hex value, and then indicate that they shouldn't be underlined or have any other text-decoration. After that, we specify the style of links when cursor is placed over them (a:hover), and in this case, we give the link an underline as a text-decoration as well as a different colour.

For the last two general styles in this CSS, we specify an indent for all p tags (paragraphs) and give it a background colour, padding which specifies the space between the border and the content of the element and a margin, which consists of space between the border of the element and its container. We also give the h1 tag a padding, background colour, specify a different font and assign it a border.

/* Layout styles */

#header {
	border-top: 8px solid #474747;
	font: bold 12px Verdana;
	text-align: center;
	padding: 20px;
	color: #444444;
}

#title1 { color: #3B99C9; }

#title2 { color: #16B752; }

.nav {
	font: 10px Verdana;
	height: 38px;
	text-align: right;
	border-bottom: 4px solid #3B99C9;
	background: #474747;
	margin-bottom: 40px;
}

.nav li { display: inline;  }

.nav li a, .nav li a:visited {
	color: #A6A6A6;
	width: 100px;
	padding: 20px 6px 6px 2px;
	text-decoration: none;
	height: 12px;
	float: left;
	text-align: right;
}

.nav li a:hover {
	color: #C1C1C1;
	background: #636363;
	border-bottom: 4px solid #16B752;
}

#content { padding: 5px 0; background: #474747; border-bottom: 4px solid #3B99C9;  }

In the first rule, the style for the header is specified which includes a top border, font, a centered text-alignment, padding and a color for the text within the div. The #title1 and #title2 rules simply indicate the colour of the words in the title. (ex: The "A CSS" text in blue, and "template" in green within the header) The next rule specifies the style for the navigation, which includes a font size and family, within the font property, a height, right aligned text, bottom border, background color as well as bottom margin. The .nav li rule then specifies the display of element, which in this case is inline. The inline value will display the div as an inline element without line breaks before or after the element. The last three rules then specify the style of links in the menu while in the various states as well as the style of the content area, all of which containing properties that we've already seen and used.

//--></style>
</head>

<body>

<div id="header"><span id="title1">A CSS</span> <span id="title2">template</span></div>
<ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Portfolio</a></li>
</ul>

<h1>Home</h1>

<div id="content">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacus. Maecenas adipiscing velit ut tellus commodo pellentesque. Pellentesque sit amet ligula sed sapien venenatis semper. Cras congue. Donec ligula sapien, aliquam in, consectetuer tincidunt, tristique sed, ipsum. Donec mattis, neque et dictum consectetuer, justo ipsum dapibus purus, ac commodo quam odio id sapien. Nam commodo, nisi quis ornare bibendum, diam augue aliquet nisi, id consectetuer massa ante malesuada est. Aenean fermentum ultrices leo. Morbi imperdiet cursus ante. Proin facilisis auctor magna.</p>

	<p>Maecenas porttitor ipsum egestas diam. In in elit lacinia tellus tempus pharetra. Nunc commodo. Suspendisse potenti. Nulla aliquam risus eu velit. Aenean nisi risus, faucibus vitae, rutrum non, varius id, pede. In accumsan, tellus et pulvinar ultricies, augue eros interdum diam, ut consectetuer nisi felis quis nunc. Mauris blandit nonummy felis. In leo. Nunc placerat tempus ipsum. Suspendisse suscipit. Nunc tincidunt laoreet justo. Proin egestas sem quis ante. Vestibulum et pede. Praesent volutpat tempor enim. Suspendisse sit amet velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet.</p>
</div>

</body>
</html>		
		

In this final segment of code, we close the style sheet and the head area. We also begin the body, within which is located a header div, a title using the h1 tag, a header title using two different colours with the use of spans, a content div and a couple paragraphs. We then close it all off in the last two lines with a closing body and html tag.

And that's it! Please bare in mind that this is a fairly simple template, but its basic design can be applied to the creation of much more dynamic, complex and original designs. It's up to you, as a designer, to truly make it your own. Creativity is the key. =)

Happy Designing!