CSS Tutorial - How to create template
In this tutorial you will create a CSS template from scratch. You are going to learn how create a fluid CSS layout with 3 columns. The result of this tutorial will be a nice and simple CSS template. It uses only one image in the header so that you are fully free to change colors, fonts or everything else on it. The resulting template is a valid XHTML, includes SEO coding (navigation after content in the code) and tested with 5 browsers (Firefox, Internet Explorer (6-8), Opera, Safari and Chrome). For this tutorial I assume that you have some HTML knowledge.
Use any HTML / CSS editor of your choice for this template. I strongly recommend NOT to copy the code snippets from this tutorial and paste them in your source, but reading, understanding and writing it yourself. If you would like to learn you have to use your fingers to type and not your mouse to copy.
Start with simple HTML mark-up like shown below
<!DOCTYPE html>
<html>
<head>
<title>Layout 1</title>
</head>
<body>
<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="navigation">
Navigation
</div>
<div id="news">
News
</div>
<div id="footer">
Footer
</div>
</body>
</html>
There are five main parts of the template: header, navigation, content, news and footer. You have started with HTML
div tags to indicate these parts. Each
div has a HTML attribute
id. This attribute helps you to choose right
div when you add CSS styles later on. HTML tag
div is also called
container.
HTML tag
div does not have any formatting on its own; you will not see any changes in the browser at this point. But still it is the most important step before you begin with CSS. You have to double check if you
divs are opened and closed properly. If not, the whole layout will fail.
Add HTML tag
style into the
head section of the HTML document.
<head>
<title>Layout 1</title>
<style type="text/css">
...
</style>
</head>
The very first CSS style resets margin and padding of ALL HTML tags. Commonly, browsers have some default margins and padding on different HTML elements. These default margins vary in each browser and you are going to loose control on your layout if you do not reset everything (*) and start with no margin at all. Add the lines below between the
style tags:
* {
margin:0;
padding: 0;
}
Next add background colour for the whole document (
body) and set font to non-serif of 12 pixel
body {
background: #eeeeee;
font-family: sans-serif;
font-size: 12px;
}
Start to add styles to the header
div. Define height and background
div#header {
height: 160px;
background: #800000;
}
The next step is very important. You are going to build
3 columns CSS layout, where navigation is placed to the left of the content and news sectuib to the right. All columns are liquid. The 1
st and 3
rd column should be 25% each, so that you have exactly 50% for the content.
Start to centre the content
div first. In CSS there is no command “center” for containers. The trick you have to do, is to create a new
div (wrapper) around the content
div, give it the width of 100% and then add margin to the inner div (content). Change HTML mark-up as shown below:
<div id="wrapper">
<div id="content">
Content
</div>
</div>
In the second step add styles for both containers in CSS
div#wrapper {
width: 100%;
}
div#content {
margin: 0 25%;
background: #BDBD00;
}
The first margin value of 0 sets the top and the bottom margin of the content
div, with 25% you have defined the right and the left margin of the content
div. When the content part is filled with background colour, you can better see where it is exactly placed.
Start to format navigation part. Fill the background with white colour, set the width of the navigation to 25%. Add left float to shift the navigation to the right on the current line. The left float causes the news part to be positioned exactly under the content
div#navigation {
background: white;
width: 25%;
float: left;
}
The navigation is placed NOT in the same line as the content. To move it to the left of the content part, first add float the wrapper
div (the div that contains the content div). This latter div has a width of 100%, therefore every other
div tag that comes afiter it is placed in the next line. This line break is added automatically as logically no other div can be displayed to the right 100% div. But if you add a negative margin to navigation, it will glide to the same line where content is and is placed at the left side. With margin-left of -100% you move the navigation “before the content”, thus making the illusion of the first column
div#wrapper {
...
float: left;
}
div#navigation {
...
margin-left: -100%;
}
Try to understand last step. If you have catched the point, you can place the next div yourself. Fill the background for the
div containing news, set the width to 25%. Float it as well to the left, but set the left margin to -25%, so it is placed to the right of the content part
div#news {
background: white;
width: 25%;
float: left;
margin-left: -25%;
}
This was the most difficult part to understand. Proceed with footer part. Fill the background of the footer, set its width to 100%. Then clear every floating to the left of the footer. If you do not clear, the footer is ALWAYS placed below the news
div (the preceding one). In most likely case that news div is shorter that content, the footer would glide behind the content div if you do not clear everything to the left of it
div#footer {
background: #800000;
width: 100%;
clear: left;
}
AT this point you are ready with layout and can proceed with styling the content within the divs. Start with the header
div by adding a level 1 heading to HTML first and typing the site name:
<div id="header">
<h1>business©ompany</h1>
</div>
Then add some text styles to it and a background image, that I have created with free graphic programm
div#header h1 {
color: white;
font-size: 86px;
font-family: serif;
text-align: right;
border-bottom: 1px solid #ffffff;
padding-right: 20px;
background: #800000 url(bg.jpg) repeat-x left 25px;
}
The challenge is to create an image that can be repeated seamlessly at the X axis. We need it as the entire site layout has a width of 100%, so that we can not say how wide exactly it will be in pixel. You need a large image that is probably wider than 800 pixel. This height of the image is limited by the height of the header
div. The visible part of the image will be about 115 pixel. It can be a panorama photo of 800 x 115 pixel or just a strip of a photo that you can imagine to repeat seamlessly.
Enclose copyright sign in the heading in HTML tag
span. This way you can make the sign larger than the rest of the title. To narrow the space before and after the sign reduce normal letter spacing
div#header h1 span {
font-size: 120%;
letter-spacing: -5px;
}
<div id="header">
<h1>business<span>©</span>ompany</h1>
</div>
Before adding content to the next four divs: navigation, content, news and footer, let’s add an inner padding to each of these parts. Attention: you can not just add padding to the HTML tag
div in this case. Inner padding will be added up to the width of the
div, so that it will be wider than 25% and 50% and will not paste in the same line. You can use the trick by adding “inner” div to these 3 parts:
<div id="wrapper">
<div id="content">
<div class="inner">
Content
</div>
</div>
</div>
<div id="navigation">
<div class="inner">
Navigation
</div>
</div>
<div id="news">
<div class="inner">
News
</div>
</div>
<div id="footer">
<div class="inner">
Footer
</div>
</div>
Add padding in CSS to all div tags that have the class "inner"
div.inner {
padding: 20px;
}
Now you can add some common HTML mark up like level 2 heading and unordered list and some styles to it as shown below
h2 {
padding: 10px;
margin-bottom: 10px;
color: white;
background: olive;
font-family: serif;
}
div#navigation ul {
margin-left: 15px;
}
Proceed with content and news part, add level 2 headings and large text to simulate the content of the future website. As the title of the content and news heading are level 2 headings as well, they are formatted the same way as heading for the navigation part. No need to change anything in your CSS (view result).
The last step will be formatting the footer part. Add a border to the top of the footer part, text colour and position of text. Format the link colour as well:
div#footer {
...
border-top: 1px solid #eeeeee;
color: white;
text-align: right
}
div#footer a {
color: white;
}
