In this blog post I will provide an example of a CSS and XHTML layout. The code that I will provide is a layout for the website showed in the previous two posts regarding creating a CSS layout.
This is the website I am trying to make a CSS layout for:
Click on the image below to view the website design..
This is the resulting code…
XHTML FILE
<!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″ />
<title>Untitled Document</title>
<link href=”css/master.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”top”>
<div id=”promo”>
this is promo
</div>
<div id=”options”>
this is options
</div>
</div>
<div id=”navigation”>
this is navigation
</div>
<div id=”bot”>
this is bottom
</div>
</body>
</html>
CSS FILE
@charset “utf-8″;
/* CSS Document */
#top{
width:986px;
height:505px;
background-color:#ffffff;
}
#promo{
width:986px;
height:284px;
background-color:#ffffff;
}
#options{
width:986px;
height:221px;
background-color:#ffffff;
}
#navigation{
width:986px;
height:31px;
background-color:#111111;
}
#bot{
width:986px;
height:500px;
background-color:#ebc795;
}
Summary
You can see how simple the code is in both the XHTML and in the CSS. This is the beauty of CSS, it cleans up your code a great deal 
Popularity: 4% [?]