This document contains the CSS code for styling and laying out elements on a webpage. It defines various classes for elements like headers, containers, buttons, images, and text. CSS properties like background images, colors, widths, heights, floats and margins are set for each class to specify the appearance and position of different page components like navigation buttons, banners, titles and content sections. The code aims to create a consistent visual design across the webpage by reusing these classes in the HTML markup.

1. Usinga CSSin webpage Designing
body{
background-color:#1A2858;
width:100%;
height:100%;
}
.bg{
background-image:url('../images/bg.jpg');
background-repeat:repeat-x;
width:100%;
height:245px;
margin-top:-8px;
margin-left:auto;
margin-right:auto;
}
.header{
background-image:url('../images/header_bg.jpg');
width:1000px;
height:243px;
margin-left:auto;
margin-right:auto;

2. background-repeat:no-repeat;
}
.logo{
background-image:url('../images/logo.gif');
width:274px;
height:70px;
margin-left:270px;
}
.container1{
width:787px;
height:20px;
margin-left:auto;
margin-right:auto;
margin-top:-40px;
}
.bt1{
background-image:url('../images/bt.gif');
width:122px;
height:28px;
margin-left:240px;
margin-right:auto;
margin-top:-20px;
float:left;
}

3. .bt2{
background-image:url('../images/bt.gif');
width:122px;
height:28px;
margin-left:10px;;
margin-right:auto;
margin-top:-20px;
float:left;
}
.bt3{
background-image:url('../images/bt.gif');
width:122px;
height:28px;
margin-left:10px;
margin-right:auto;
margin-top:-20px;
float:left;
}
.content{
line-height:28px;
font-style:italic;
font-size:20px;
margin-left:30px;
}

4. .bt4{
background-image:url('../images/bt.gif');
width:122px;
height:28px;
margin-left:10px;
margin-right:auto;
margin-top:-20px;
float:left;
}
.container_top_bg{
background-image:url('../images/container_top_bg.jpg');
width:787px;
height:202px;
margin-top:-40px;
margin-left:auto;
margin-right:auto;
}
.container2{
width:83px;
height:22px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;

5. }
.title_welcome{
width:787px;
height:22px;
margin-left:-315px;
margin-top:-150px;
}
.container3{
width:787px;
height:2px;
margin-left:-315px;
margin-right:auto;
margin-top:-8px;
margin-bottom:auto;
}
.p4{
background-image:url('../images/p4.gif');
width:67px;
height:150px;
margin-left:-300px;
margin-top:20px;
float:left;
}
.content1{

6. width:410px;
height:150px;
margin-left:-200px;
margin-top:25px;
margin-right:-700px;
margin-bottom:auto;
font-size:13px;
}
.container_center_bg{
background-image:url('../images/container_center_bg.jpg');
width:787px;
height:350px;
background-repeat:repeat-y;
margin-left:-352px;
margin-top:-42px;
}
.container4{
width:787px;
height:22px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
.title_products{

7. background-image:url('../images/title_products.gif');
width:83px;
height:22px;
margin-left:-315px;
margin-top:-305px;
}
.container5{
width:787px;
height:2px;
margin-left:-315px;
margin-right:auto;
margin-top:-7px;
margin-bottom:auto;
}
.container6{
width:787px;
height:61px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
.i1{
width:70px;
height:61px;

8. margin-left:-315px;
margin-top:10px;
}
.i_divider{
width:1px;
height:67px;
margin-left:-220px;
margin-top:-50px;
}
.i2{
width:70px;
height:67px;
margin-left:-210px;
margin-top:-65px;
}
.i_divider1{
width:1px;
height:67px;
margin-left:-130px;
margin-top:-70px;
}
.i3{
width:49px;
height:76px;
margin-left:-110px;

9. margin-top:-65px;
}
.i_divider2{
width:1px;
height:67px;
margin-left:-40px;
margin-top:-76px;
}
.i4{
width:89px;
height:68px;
margin-left:-30px;
margin-top:-70px;
}
.i_divider3{
width:1px;
height:67px;
margin-left:80px;
margin-top:-65px;
}
.i5{
width:80;
height:79;
margin-left:100px;
margin-top:-65px;

10. float:left;
}
.i_divider4{
width:1px;
height:67px;
margin-left:20px;
margin-top:-65px;
float:left;
}
.i6{
width:43px;
height:77px;
margin-left:20px;
margin-top:-65px;
float:left;
}
.content2{
width:787px;
height:150px;
margin-left:auto;
margin-top:25px;
margin-right:auto;
margin-bottom:auto;
font-size:13px;
}

11. Creatinga webpage
<!DOCTYPE html>
<!---------------------htmlsectionstart------------->
<html>
<!---------------------headsectionstart------------->
<head>
<linkrel="stylesheet"type="text/css"href="style/style.css"/>
</head>
<!---------------------headsectionclose------------->
<!--------------------bodysectionstart------------->
<body>
<divclass="bg">
<divclass="header">
<divclass="logo">
</div>
</div>
</div>
<divclass="container1">
<divclass="bt1"><divclass="content">Home</div></div>
<divclass="bt2"><divclass="content">Aboutus</div></div>
<divclass="bt3"><divclass="content">product</div></div>
<divclass="bt4"><divclass="content">contact</div></div>

12. </div>
<divclass="container_top_bg">
</div>
<divclass="container2">
<divclass="title_welcome"><imgsrc="images/title_welcome.gif"></div>
<divclass="container3">---------------------------------------------------------------
-------------------------------</div>
<divclass="p4"></div>
<divclass="content1"><pstyle="color:blue">A musical
instrumentsisadevice constructedormodifiedforthe purpose of makingmusic.
In principle anythingthatproducessoundcanserve as a musical
instruments.</p>
<p style="color:blue">The
expression,howeverisreservedgenerallyforthe itemsthathave aspecificmusical
purpose.The academicstudyof
musical instrumentiscalledorganology.</p>
</div>
<divclass="container_center_bg">
</div>
<divclass="container4">
<divclass="title_products"></div>
<divclass="container5">----------------------------------------------------
------------------------------------------------------------</div>
</div>
<divclass="container6">
<divclass="i1"><imgsrc="images/i1.gif"></div>
<divclass="i_divider"><imgsrc="images/i_divider.gif"></div>

13. <divclass="i2"><imgsrc="images/i2.gif"></div>
<divclass="i_divider1"><img
src="images/i_divider.gif"></div>
<divclass="i3"><imgsrc="images/i3.gif"></div>
<divclass="i_divider2"><img
src="images/i_divider.gif"></div>
<divclass="i4"><img
src="images/i4.gif"></div>
<div
class="i_divider3"><imgsrc="images/i_divider.gif"></div>
<div
class="i5"><imgsrc="images/i5.gif"></div>
<div
class="i_divider4"><imgsrc="images/i_divider.gif"></div>
<divclass="i6"><imgsrc="images/i6.gif"></div>
<divclass="content1"><pstyle="color:blue">A musical
instrumentsisadevice constructedormodifiedforthe purpose of makingmusic.
In principle anythingthatproducessoundcanserve as a musical
instruments.
The expression,howeverisreserved
generallyforthe itemsthathave a specificmusical
purpose.The academicstudyof
musical instrumentiscalledorganology.</p>
</div>
</div>
</body>
<!--------------------bodysectionstart------------>

14. </html>
<!--------------------html sectionclose------------->