Creating a CSS Template

Creating a CSS Template
Difficulty: Easy
Description: Create a valid XHTML and CSS template with the help of this tutorial.
Author: Daniel St. Jules; Date Added: 2007-02-18; Views: 62221

CSS, an acronym meaning Cascading Style Sheets, is a style sheet language used to style documents written in various computer languages such as HTML, XUL, etc. As a designer, we have been offered a new way of modifying the presentation of our pages, without the use of tables, and it's time that all begin to convert to this manner of styling web pages. In this tutorial, I'll explain how to code a layout with the use of valid CSS and no, I'm not talking about those boring colourless plain 'ol pages that make drying paint look interesting, but a simplistic, stylish template which can be the stepping stone for much more advanced designs.

In this tutorial, we will be coding a free layout, which is currently offered on Gamexe.net, known as CoolBlue. You can view a demo of the final outcome by clicking on the thumbnail bellow:

thumbnail

Getting started

Before we dive into the css, you'll have to save the following .zip to your computer and extract it: CSS_template.zip The zip contains all the images necessary for the template we'll be coding, as well as an index.html file which is all set for us to style. So, now that you've extracted the zip, let's take a look at the index.html file in the folder. The html file should contain the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CoolBlue CSS template by Gamexe.net</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta name="author" content="Daniel St. Jules" />
<link href="CoolBlue.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header"><img src="header_logo.gif" alt="A Valid CSS Layout" /></div>

<div id="nav">
<a href="#">Home</a>
<a href="#">Forum</a>
<a href="#">TopSite</a>
</div>

<div id="container">

<div id="wrapper">
	<div id="content">

		<h2>News and Updates</h2>

		<div class="news">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi pellentesque 
		molestie urna. Nunc porta, metus sit amet ultricies fringilla, augue elit luctus 
		orci, vitae vulputate tellus turpis sed mi. Nunc quam est, ultrices vel, lacinia ut, 
		placerat vitae, turpis. Nulla nonummy, dolor varius ullamcorper blandit, 
		sem orci mattis metus, placerat viverra nisi mi quis ipsum. Aenean nec nulla at 
		elit vestibulum aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		Curabitur iaculis facilisis massa. Phasellus euismod, pede et molestie egestas, 
		ligula augue commodo erat, at tincidunt nulla pede in lectus. Sed lectus. Quisque 
		accumsan venenatis felis. Integer commodo pretium nunc.</p>

		<p>Maecenas condimentum leo vitae lectus. Donec lacus ante, eleifend in, molestie ac, 
		congue in, turpis. Maecenas luctus suscipit risus. Duis id felis in metus iaculis 
		malesuada. Aliquam erat volutpat. Pellentesque tincidunt. Sed posuere, odio eget 
		sollicitudin bibendum, lorem felis volutpat nunc, at fringilla nunc lacus eleifend 
		lorem. Vivamus euismod nisi. Vestibulum ante ipsum primis in faucibus orci luctus 
		et ultrices posuere cubilia Curae; Donec vestibulum bibendum massa. Cras luctus nibh non 
		urna. Nulla facilisi. Nunc faucibus. Aliquam placerat felis at lacus.</p>
		</div><!--news-->
		<div class="news2">Posted by Daniel St. Jules on Feb 10, 03:39 AM</div>

		<div class="news">
		<p>Curabitur eros. Proin ligula nibh, sodales eu, lacinia a, viverra eget, lacus. 
		Aliquam varius hendrerit sem. Sed posuere facilisis mi. Vestibulum luctus odio sed mi. 
		Integer consectetuer elit at nisl. Nullam convallis mollis lectus. Mauris accumsan 
		elementum eros. Duis eleifend tempor turpis. Integer erat justo, adipiscing id, vehicula 
		eu, imperdiet at, augue. Quisque in nisi vitae nisi porta viverra.</p>
		</div><!--news-->
		<div class="news2">Posted by Daniel St. Jules on Feb 8, 03:39 AM</div>

	</div><!-- content -->
</div><!-- wrapper -->
<div id="menu"><img src="menu_top.gif" alt="" />
	<div id="menucontainer">

		<form method="get" action="#">
		<input type="text" id="searchfield" name="q" size="15" maxlength="255" value="" />
		<input type="submit" class="submit" name="btnG" value="Search" />
		</form><br />

		<strong>Gamexe.net</strong><br />
		<ul>
		<li><a href="#">News</a></li>
		<li><a href="#">Staff</a></li>
		<li><a href="#">Apply for Staff</a></li>
		<li><a href="#">Affiliate</a></li>
		<li><a href="#">Link to Us</a></li>
		</ul>
		<br /><strong>Gaming</strong><br />
		<ul>
		<li><a href="#">Reviews</a></li>
		<li><a href="#">GCN</a></li>
		</ul>

	</div><!-- navcontainer -->
</div><!-- navigation -->

<div id="footer">
	CoolBlue template by Daniel St. Jules of <a href="http://www.gamexe.net">Gamexe.net</a>
</div>

</div><!-- container -->

</body>
</html>
		

I'll give a quick run through the code. The first line declares the DOCTYPE for the file, specifying that it's XHTML transitional 1.0 and should thus use the appropriate syntax. After that, there's the head section of the document, in which the title, language, type, author, and style sheet are specified within. The one line that is very important in that block of code is

<link href="CoolBlue.css" rel="stylesheet" type="text/css" />

as it specifies the location of the CSS style sheet that will be used to style the page. After the head section, the body is opened, and all the content can be found there. Among the content, you'll find various divs such as the container, wrapper, nav, menu, all of which will be styled with the help of CSS. If you have a fair amount of knowledge of CSS and HTML, you should be ok, if not, then continue reading as things will become clearer.

CSS - making it all look good

Create a new file in the CSS_template folder and name it CoolBlue.css, while remembering that file names are often case sensitive. Open up CoolBlue.css with your favourite text editor, mine being Notepad++, which can be found at http://notepad-plus.sourceforge.net/. Now, copy and paste the following code into the blank CSS file:

/*--------------------------*/
/* GENERAL STYLES */
/*--------------------------*/

html,body { margin:0; padding:0; }

body {
	color: #6B6B6B;
	font-size: 10pt;
	font-family: Verdana, Arial;
	background: #E6EDF4 url('bg.gif') top repeat-x;
}

a:link,a:active,a:visited { text-decoration: none; color : #5E5E5E; }
a:hover		{ text-decoration: underline; color : #4F4F4F; }

img { border: 0px; margin: 0px; }

input { color : #4D4D4D; font: normal 12px Verdana, Arial, sans-serif; }

p { text-indent: 20pt; }

form { padding: 0px; margin: 0px; }
		

Above is the first part of our CSS file. The first thing you should note is the syntax/formatting used. Between multiple selectors of a rule, a comma should be present, an example being "html, body". After the selectors is a curly brace {, and a rule is closed with a second curly brace }. In between the curly braces you can find a series of declarations followed by semi-colons. The declarations themselves are composed of a property (ex: text-indent) and a value (ex: 20pt) which are separated by a colon. You can also note the spacing used. When dealing with a fairly lengthy rule, such as the body one, I like to place each tabbed declaration, as well as the ending closing curly brace, on its own line. I also use spaces between most values and properties as to keep the code nice and clean. This is the basic formatting used when I code my CSS files. It's fairly simple, although it might be a bit overwhelming at first, don't worry. So now onto explaining the different rules presented above.

html,body { margin:0; padding:0; }

body {
	color: #6B6B6B;
	font-size: 10pt;
	font-family: Verdana, Arial;
	background: #E6EDF4 url('bg.gif') top repeat-x;
}

Ok, the first rule consists of declarations for the html and body tags. They simply declare that there will be no padding, spacing between the border and content of an object, and margin, which consists of the spacing outside of the border. The color declaration within the body rule specifies the default colour of the text used in the document, and the value of the property can be either a hex (ex: #FFFFFF) or word (ex: white). The font-size should be straight forward enough, and it can be measured in px, pt, em, etc. The font-family property will set the default font used for text, and more than one font can be specified as a value in the odd chance of a font not being installed on a visitor's computer. The background property then specifies a background colour for the page (ex: #E6EDF4), a background image, the position of the image and whether or not the background image should repeat; in this case, the background image will repeat horizontally.

a:link,a:active,a:visited { text-decoration: none; color : #5E5E5E; }
a:hover		{ text-decoration: underline; color : #4F4F4F; }

The next two rules specify the style of links in the page. In the rules, different pseudo-classes are implemented as to specify the look of the links while in different states. :link specifies the style while in the default state, :active while it's clicked, :visisted after it's been clicked and :hover while the cursor is over the link. The properties used are text-decoration, one which can have a value of none, underline, overline, line-through or blink and the color property, which will specify the colour of the text.

img { border: 0px; margin: 0px; }

input { color : #4D4D4D; font: normal 12px Verdana, Arial, sans-serif; }

p { text-indent: 20pt; }

form { padding: 0px; margin: 0px; }

The three rules posted above then specify the style of all img, input, p and form tags. For the img rule, we've specified that they should never have a border, even if used within a hyperlink, and this will apply to ALL img tags. (ex: <img src="header_logo.gif" alt="A Valid CSS Layout" />) The input rule then specifies the style of all input tags and you can guess what the p and form rule does. The properties in all of these declarations should be fairly self-explanatory.

Now copy and paste the following code and add it in the CSS file, after the form rule:

/*--------------*/
/* LAYOUT */
/*------------*/

#header {
	height: 81px;
	min-width: 753px;
	overflow: hidden;
	margin: 0;
	text-align: center;
}

#container {
	margin: 0px 58px 0px 58px;
	min-width: 631px;
}

#wrapper { float: right; width: 100%; margin-left: -160px; margin-bottom: 26px; }

#content {
	margin: 10px 0px 0px 160px;
	padding: 3px 0px 0px 10px;
	background: #E6EDF4 url('content_bg.gif') top repeat-x;
}

#menu {
	float: left;
	margin: 10px 0px 10px 0px;
	width: 150px;
	background: url('menu_bg.gif') repeat-y;
	border: #758697 1px solid;
	border-width: 0px 1px 1px 1px;
	padding: 0px 0px 10px 0px;
	text-align: left;
}

#footer {
	clear: both;
	width: 100%;
	border-top: #ADADAD 1px dashed;
	text-align: center;
	padding: 3px;
	font-size: 8pt;
}

#menucontainer ul {
	margin: 0px 0px 0px 10px;
	padding: 0;
	list-style-type: none;
}

#menucontainer a {
	display: block;
	width: 127px;
	padding: 0px;
	margin: 0px;
	background: url('arrow.gif') 0 .4em no-repeat;
	padding-left: 6px;
}

#nav {
	height: 15px;
	width: 100%;
	text-align: center;
	min-width: 753px;
}

#nav a {
	margin: 0px 30px 30px 0px;
	color: #3A3F45;
}

strong { padding-left: 10px; }
		

There are quite a few rules in this chunk of code, so I'll just list some of them.

#header: This div, located at the top of the page, has a height of 81px, and its contents are aligned in the center. The min-width property works in most modern browsers and specifies the minimum width, which will prevent the layout from breaking due to a window size being too small. The overflow: hidden will make the contents of the div automatically disappear if they do not fit inside the container as to prevent the layout from breaking.

#container: Has a min-width as to, once again, prevent the layout from breaking due to reducing the size of the window. The margin property then specifies the top, right, bottom and left margins. This will center the container.

#wrapper: Positions the content area in the container by using the float property and giving it a left margin.

#content: Also contributes to the positioning of the content area with the use of margins and uses a background which repeats horizontally.

#menu: Specifies the position, dimensions and style of the left menu while giving it a background image.

#footer: Consists of some basic styling of the footer div and gives it a dashed border.

#nav: Simply specifies the dimensions of the top navigational area and centers its contents as well.

Next, add the following code to the CSS file after the "strong" rule.

/*---------------------------*/
/* CONTENT STYLES */
/*---------------------------*/

/* search */

.submit {
	background: #6D92B6 url('submitbg.gif') repeat-x;
	margin-left: 10px;
	border: 1px solid #787878;
}

#searchfield {
	margin: 0px 0px 3px 10px;
	background: #F2F2F2 url('inputbg.gif') repeat-x;
	border: #B9B9B9 solid 1px;
	width: 130px;
}

/* news */

.news{
	width: 80%;
	padding: 10px 10px 20px 10px;
	background-color: #C3CBD4;
}


.news2{
	margin-bottom: 2em;
	font-size: 11px;
	color: #898989;
	width: 300px;
	border: #9CA5AE dashed 1px;
	text-align: center;
	position: relative;
	top: -13px;
	left: 10px;
	background-color: #E4EAF1;
	padding: 3px;
}

No new properties are introduced in the search styles, although a couple new ones can be found in the .news2 rule. The position property enables users to position an element in either an absolute manner, specifying its exact coordinates on the page, or relative based on its default location. We use the value "relative" in this case, and then use the top and left properties to specify its relative location. Because top has a negative value, the element will be located above its usual position, thus allowing it to overlap the .news div.

Now that you have all the CSS necessary for the template, simply save the file with the name CoolBlue.css to the folder in which the index.html file is located and open the html file in one of your browsers. You've just made a valid CSS and XHTML layout! Now, try experimenting by using different values, changing the images/backgrounds, adding new elements, etc. Remember, this is just the basic idea for a layout, so customization is recommended. Also, as reference, here's the full CSS of the template:

/*--------------------------*/
/* GENERAL STYLES */
/*--------------------------*/

html,body { margin:0; padding:0; }

body {
	color: #6B6B6B;
	font-size: 10pt;
	font-family: Verdana, Arial;
	background: #E6EDF4 url('bg.gif') top repeat-x;
}

a:link,a:active,a:visited { text-decoration: none; color : #5E5E5E; }
a:hover		{ text-decoration: underline; color : #4F4F4F; }

img { border: 0px; margin: 0px; }

input { color : #4D4D4D; font: normal 12px Verdana, Arial, sans-serif; }

p { text-indent: 20pt; }

form { padding: 0px; margin: 0px; }

/*--------------*/
/* LAYOUT */
/*------------*/

#header {
	height: 81px;
	min-width: 753px;
	overflow: hidden;
	margin: 0;
	text-align: center;
}

#container {
	margin: 0px 58px 0px 58px;
	min-width: 631px;
}

#wrapper { float: right; width: 100%; margin-left: -160px; margin-bottom: 26px; }

#content {
	margin: 10px 0px 0px 160px;
	padding: 3px 0px 0px 10px;
	background: #E6EDF4 url('content_bg.gif') top repeat-x;
}

#menu {
	float: left;
	margin: 10px 0px 10px 0px;
	width: 150px;
	background: url('menu_bg.gif') repeat-y;
	border: #758697 1px solid;
	border-width: 0px 1px 1px 1px;
	padding: 0px 0px 10px 0px;
	text-align: left;
}

#footer {
	clear: both;
	width: 100%;
	border-top: #ADADAD 1px dashed;
	text-align: center;
	padding: 3px;
	font-size: 8pt;
}

#menucontainer ul {
	margin: 0px 0px 0px 10px;
	padding: 0;
	list-style-type: none;
}

#menucontainer a {
	display: block;
	width: 127px;
	padding: 0px;
	margin: 0px;
	background: url('arrow.gif') 0 .4em no-repeat;
	padding-left: 6px;
}

#nav {
	height: 15px;
	width: 100%;
	text-align: center;
	min-width: 753px;
}

#nav a {
	margin: 0px 30px 30px 0px;
	color: #3A3F45;
}

strong { padding-left: 10px; }

/*---------------------------*/
/* CONTENT STYLES */
/*---------------------------*/

/* search */

.submit {
	background: #6D92B6 url('submitbg.gif') repeat-x;
	margin-left: 10px;
	border: 1px solid #787878;
}

#searchfield {
	margin: 0px 0px 3px 10px;
	background: #F2F2F2 url('inputbg.gif') repeat-x;
	border: #B9B9B9 solid 1px;
	width: 130px;
}

/* news */

.news{
	width: 80%;
	padding: 10px 10px 20px 10px;
	background-color: #C3CBD4;
}


.news2{
	margin-bottom: 2em;
	font-size: 11px;
	color: #898989;
	width: 300px;
	border: #9CA5AE dashed 1px;
	text-align: center;
	position: relative;
	top: -13px;
	left: 10px;
	background-color: #E4EAF1;
	padding: 3px;
}

And the following is a link to download this template as well as other free templates made by Gamexe.net:
http://www.gamexe.net/templates/index.php

Well, I hope this has helped. This was a rather basic explanation of using CSS, so there's a lot more to be learned. If ever you need help, feel free to post on the forums as many members would be happy to assist.
Happy Designing.