CSS Basic Template

Here’s a basic CSS template that you can use. There’s a header, a footer, a left side and a right side.

You need to create an index.html and mystyle.css file. Place them in the same directory.

css_example

index.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" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<title>CSS Template</title>
</head>
<body id="backdrop">
<div id="container">
 <div id="header">
 <center>Header</center>
 </div>
 <div id="leftBar">
 <center>Left Side</center>
 </div>
 <div id="maincontent">
 <center>Main Content</center>
 </div>
 <div id="rightBar">
 <center>Right Side</center>
 </div>
 <div id="footer">
 <center>Footer</center>
 </div>
</div>
</body>
</html>

mystyle.css

@charset "UTF-8";
 /* CSS Document */
#backdrop {
     background-color:#333;
 }
#container {
   margin:auto;
   width: 100%;
   background: #ffffff;
 }
#header {
   background: #90F;
 }
#leftBar {
   float: left;
   width: 20%;
   background: #999;
 }
#maincontent {
   float:left;
   width:60%;
   background-color: #FF9;
 }
#rightBar {
   float:right;
   width: 20%;
   background: #999;
 }
#footer {
   clear:both;
   background:#90F;
 }