CSS: Divide Web Page by Background Color Setup

CSS and HTML: Use Background Color as Divider

The below example of CSS Stylesheet is to use Web Page background color as Divider. The different HTML elements are designed by CSS attributes which divide the page by color. The below CSS stylesheet for Web page Divider by Background color utilizes HTML tags of Body, DIV, Paragraph and Navigation

CSS Stylesheet for Highlight Web Page by Background Color

<!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"xml: lang="en"lang="en">
<head>
<title>Divide Web Page by Background Color Setup</title>
<style rel="stylesheet" type="text/css">


body, div, p {
font-family: verdana, arial, helvetica, sans-serif;
color: #099;
}
body {
margin: 5px;
padding: 5px;
background-color: #999;
}
p {
font-size: 0.7em;
line-height: 1.8em;
}
#content {
padding: 15px;
margin-top: 15px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
background-color: #1ff;
border: 3px solid #456;
width: 90%;
}
.innerBox {
padding: 0px 10px 0px 10px;
margin: 0px;
border: 4px solid #456;
}
#navBar {
padding: 0px 10px 0px 10px;
margin-top: 0px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #ccc;
text-align: right;
width: 90%;
}
.nav {
margin-top: 0px;
margin-bottom: 5px;
}


</style>
<meta http-equiv="content-type"content="text/html;charset=iso-8859-1"/>
</head>
<body>
<div id="content">
<p>This is Example. This is Example. This is Example. .</p>
<div class="innerBox"><p>This is Example. This is Example. This is Example. This is Example</p></div>
<p>This is Example. This is Example. This is Example. This is Example. This is Example</p>
</div>
<div id="navBar">
<p class=nav><< back | home |next >></p>
</div>
</body>
</html>


Related Topic How to Add Facebook Layout or Wallpapers to your Profile
CSS RGB Function Background Color Setup
CSS Stylesheet Example for Different HTML Building Blocks
CSS Background Image Setup in Different Position
CSS Background Container Set-up
CSS  web design  HTML  div  

nScraps.com 2011   Privacy Policy  Terms of Service  Feedback