Create a Complete Website Template with Rounded Corners Using Css and Html
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.
Let’s start at the beginning:
The HTML Header:
Lets enter the doctype :
<!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:
<head>
Meta Content:
<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:
<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:
<style type="text/css">
For example, let’s 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 on any side, you will add it like this:
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #CED0C3;
}
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:
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:
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:
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:
</style> </head> <body>
This is where the page begins.
Lets begin making the website now:
We begin by defining the Global area of the website, look below:
<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:
.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:
.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;
}
Lets start making the navigation now:
<!-- BEGIN: Navigation --> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> <!-- END: Navigation -->
You’re going to need a little CSS to make that Navigation Menu work:
This is just defining the line below the navigation and provide a little padding so its a bit distant from the corner.
#nav {
margin:0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
html>body #nav {
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
[/php]
* This html> tag is a CSS hack that is being used for proper display in Internet Explorer.
[css]
#nav li { margin: 0; padding: 0; display: inline; list-style-type: none; }
You can change the appearance of your links if you wish by changing the color setting, decoration, font style and a lot more by playing with the settings in this code:
#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
To add the image that displays when you hover the mouse over a link in the menu:
#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(tab_rounded.gif) no-repeat bottom center;
}
Leave another Line Break to separate the header from the navigation, then add the header image, this image could contain your logo and a little about your company etc. It should be around 800px in width or as you would want, you could do a lot of things:
<div class="header"><img src="header.jpg" border="0" alt="" /><br /> <br /></div>
Define Header in the CSS Styles:
.header {
width:828px;
text-align:left;
padding-left:40px;
padding-right:40px;
float:left;
background-color:#FFFFFF;
}
The Padding helps the image be in the center. Your header image should be around 800px in width, since our global area is only 914px, we want that image in the center.
CONTENT:
You can define different columns inside a global container. Here we will define the content container and the main and right column of the website.
THE CSS:
First, you define the content container, its width, padding, and background color:
.content {
width:828px;
text-align:left;
padding-left:20px;
padding-right:40px;
float:left;
background-color:#FFFFFF;
}
The width of the two columns should not be bigger than the width in the ‘content’ style above, you can add three columns too, but I think they’d be really small..
Now you define the columns, you can see the ‘float’ command makes it easy to place them at the right places on the page, the rest is pretty easy to understand:
#columnmain {
float: left;
width: 550px;
text-align: left;
font-size: 9px;
}
#columnright {
float: right;
width: 250px;
text-align: left;
font-size: 9px;
}
Inside the ‘Body’ tag we add:
<div class="content"> <!-- BEGIN: Content --> <div id="columnmain">
You can add the content you wish to see on the main column here. Then you will close the main column with the /div tag and start the right column:
</div> <div id="columnright">
You may add the content you wish to see on the right side of the page here. Then close the right column tag.
</div> <!-- END: Content -->
Here you will close two more tags, the ‘content’ tag and the ‘content_out’ tag:
</div></div>
FOOTER:
The last thing to do is to create a footer, you can choose to have links in your footer(as shown below) or you can choose to go with only a copyright or a link or just leave it empty if you want, however, it is always recommended to have footer links.
On the first page, I showed you how to define the colors of the footer links to make them stand out. Now you just have to define the footer background and align the text in center so it is aligned properly:
.footer_bg {
text-align:center;
background:#fff;
}
Once you have defined this, you can go ahead and add the footer html:
[slider]<div class="footer_bg"> <a class="footerlinks" href="">Home</a> | <a class="footerlinks" href="">About Us</a> | <a class="footerlinks" href="">Contact Us</a><br /><br />Copyright © 2009 <a href="">SurfnLearn.com</a><br /> </div>
Once you have added the footer, the only thing left is to add the image to the bottom of the pageto give it rounded corners:
.content_end {
background-image:url(content_end.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
width:914px;
height:14px;
}
After you’ve done this, you can simply add the HTML between the ‘body’ tags:
<div class="content_end"></div>
Close the ‘global’ tag and then close the ‘body’ and ‘html’ tags:
</div> <br /> </body> </html>
Hope you found this tutorial interesting. I put a lot of time into making it, please leave any comments or questions you have, I will try my best to answer them.
You can check through the CSS to see if you’ve made any mistakes:
The CSS
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #CED0C3;
}
body,td,th {
font-family: Verdana;
font-size: 12px;
color: #000000;
margin:0px auto;
text-align:center;
}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;
}
a.footerlinks, a.footerlinks:visited {
color:#59759f;
text-decoration: none;
}
a.footerlinks:hover {
color:#7b7b7b;
text-decoration: none;
}
#content {
width: 900px;
padding-top: 10px;
}
#footer {
width: 100%;
height: 94px;
text-align: left;
clear: both;
margin-top: 15px;
bottom: 0px;
}
#columnmain {
float: left;
width: 550px;
text-align: left;
font-size: 9px;
}
#columnright {
float: right;
width: 250px;
text-align: left;
font-size: 9px;
}
.global {
width:914px;
margin:0px auto;
text-align:center;
}
.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;
}
.content_end {
background-image:url(content_end.jpg);
background-repeat:no-repeat;
background-color:#FFFFFF;
width:914px;
height:14px;
}
.content {
width:828px;
text-align:left;
padding-left:20px;
padding-right:40px;
float:left;
background-color:#FFFFFF;
}
.footer_bg {
text-align:center;
background:#fff;
}
#nav {
margin:0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
html>body #nav {
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(tab_rounded.gif) no-repeat bottom center;
}
.header {
width:828px;
text-align:left;
padding-left:40px;
padding-right:40px;
float:left;
background-color:#FFFFFF;
}
</style>
HTML:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="INDEX, FOLLOW" /> <title>Enter your title here</title> <!--- Insert CSS here ---> </head> <body> <div class="global"> <div class="content_out"> <div class="content_top"></div> <!-- BEGIN: Navigation --> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> </ul> <!-- END: Navigation --> <br /> <div class="header"><img src="header.jpg" border="0" alt="" /><br /> <br /></div> <div class="content"> <!-- BEGIN: Content --> <div id="columnmain">Your Main Column Text Here</div> <div id="columnright">Your Right Column Text Here</div> <!-- END: Content --> </div></div> <div class="footer_bg"> <div class="footer_bg"> <a class="footerlinks" href="">Home</a> | <a class="footerlinks" href="">About Us</a> | <a class="footerlinks" href="">Contact Us</a><br /><br />Copyright © 2009 <a href="">SurfnLearn.com</a><br /> </div> <div class="content_end"></div> </div> <br /> </body> </html>
I hope this tutorial on creating a complete website template with rounded corners using CSS and HTML was helpful. If you have any comments or questions please feel free to ask.
