Site Statistics
Lets see.. 356 users have been online together, the search feature has been used 13149 times, we have 6439 listed tutorials, a total of 3611585 tutorials have been served so far and a total of 18974 registered members.
Donate | Privacy policy | RSS | FAQ's | Contact us
Bookmark: 
| Connect with FB: 
| Connect with FB: Please Note: Do NOT copy our entire tutorials, we work hard to make these. You are not allowed to translate our tutorials and add them to your site without our permission.
Checked out our Comics yet?
The Objective of this tutorial is to show you how to create a website with a rounded corners template with CSS and HTML using as few images as possible.
When I was new to web design, I always had issues making templates with rounded corners without using heavy images. This way of doing it was very simple, the page is stretchable, that means you can put in as much content you want in the middle and right columns and the page will stretch as long as you take it, followed by the footer. The CSS Navigation is quite simple yet I think its really good, I hope you like it too. Actually a friend on the site asked me to update his template. I thought a clean, professional looking template would do better than what he currently had. I just made the template and added all his content to it.
I have gathered and zipped the images used in the CSS to create this webpage, they can be downloaded here, a complete working demo html file is also available in this zipped file. You can preview a demo of the page you will be creating here. Please keep in mind, the content and the header image added was just to show how it could look. You can feel free to add your own images and contents to it to come up with something really good.
Lets start at the beginning:
The HTML Header:
Lets enter the doctype :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Enter the head tag:
Code:
<head>
Meta Content:
Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Enter a brief but descriptive description here." />
<meta name="keywords" content="Enter some valid keywords that are mentioned on this page here" />
Title:
Code:
<title>Enter your title here</title>
The CSS:
For someone who is a newbie at this, through out the tutorial, when I tell you that this is the CSS we are going to add, it will be added here after we open the 'style' tag and before we close the 'style' tag:
Code:
<style type="text/css">
For example, lets add the body style, so the browser knows how to align and what background color we want on our website, and that the page has no margin's on any side, you will add it like this:
Code:
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #CED0C3;
}
</style>
Notice that you have written the name of the style, followed by the open curly bracket '{' written the codes and their values and then closed the style with the closed curly bracket '}' You will always add another style after this closed bracket.
Now you set the body fonts and the color of links to be used throughout the website.
Here, you choose to have the regular font color as black, and the font family throughout the page to be verdana. You can choose different fonts, choose to have your text aligned as you wish or have a bigger or smaller font size depending on what you prefer:
Code:
body,td,th {
font-family: Verdana;
font-size: 12px;
color: #000000;
margin:0px auto;
text-align:center;
}
You can choose to have your links underlined or not, I have chosen not to. You can also choose the color of the links on your website:
Code:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #708491;
}
a:hover {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #708491;
}
You can also set different settings for links in different parts of your website, for example if I want the links in my footer to stand out from the rest of the page, I choose them to be a different color:
Code:
a.footerlinks, a.footerlinks:visited {
color:#59759f;
text-decoration: none;
}
a.footerlinks:hover {
color:#7b7b7b;
text-decoration: none;
}
After you have added this basic CSS to your website. close the 'Style' tag, followed by closing the 'head' tag, and starting the 'body' tag:
Code:
</style>
</head>
<body>
This is where the page begins.
The Website Header:
Lets begin making the website now:
Define a Line break (leave a spacer between lines/paragraphs), we are leaving a little space before the website begins:
Code:
<br />
We begin by defining the Global area of the website, look below:
Code:
<div class="global">
<div class="content_out">
<div class="content_top"></div>
Define the global width of the page to the browser, this width is the size of the image you should use on the top and bottom of the page to make the rounded corner style, the images provided with this tutorial are of 914px width, if you want to increase or decrease you will have to toggle the width according to your images here, and throughout the CSS, because the global style is defining the exact amount of space our website contains:
Code:
.global {
width:914px;
margin:0px auto;
text-align:center;
}
This is where you make the rounded corners on top, the 'content_out' layer is being used to give a little white space, however, the 'content_top' layer has the image in the background that gives the rounded effect. You will find the image in the zipped file available on the first page:
Code:
.content_out {
background-color:#FFFFFF;
height:70px;
}
.content_top {
background-image:url(content_top.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
width:914px;
height:14px;
}
Continued on the next page
Encourage us, share our content:
Comments
Post by Pulsa all-operator on February 17th, 2012Inspite of very new at this field, I would thank you for this great tutorial, but I wonder if anyone of you could teach me how to make a link-list for the right column. Second thanks for this.
Post by Pulsa all-operator on February 17th, 2012Inspite of very new at this field, I would thank you for this great tutorial, but I wonder if anyone of you could teach me how to make a link-list for the right column. Second thanks for this.
Post by Invention on May 12th, 2011Hey! I've been looking FOR EVER for an easy, in-lay-man's-terms XHTML/CSS Tutorial. Y'all have accomplished this. I L.O.V.E.D this!! Thank you for everything!!
Post by Otroski on May 16th, 2009Hey thank mate for this simple worthy tutorial. Finally I have had some insight on how to make those good looking rounded corners;-) I hope to learn more from someone like you. Thanks again,
Otroski.
Post by jakey on April 8th, 2009Nice.. Thanks I always wanted to know how to make these rounded corner templates!
Post by Wrathchild on April 2nd, 2009Nice tutorial with something different! Easy to understand.
Thanks,
Wrathchild
Please Login to Write a Comment.
Not a Member? It takes just a minute... Register here.
Tutorial Statistics
Votes: 5
Rating: 8.8
Views: 30275
Author: DevilsWrath
Message this User
View this User's ProfileMain Category:
CSS Tutorials
Sub-Category:
Beginners
Rate this Tutorial:
Get the latest tips and tricks delivered to you!Subscribe to SurfnLearn, and get the latest tutorials delivered to you for free!
Follow our tutorial updates on
