Programs in CSS
2. Creating a Webpage Layout using CSS.
style.css
*{
margin:0;
}
body{
background-color:#09F;
}
#wrapper{
width:980px;
height:768px;
background-color:#CC9;
margin-left:auto;
margin-right:auto;
}
#banner{
width:960px;
height:130px;
background-color:#630;
color:#FFF;
font-size:36px;
padding:20px 0 0 20px;
}
#menubar{
width:980px;
height:40px;
background-color:#333;
}
#menubar ul{
list-style-type:none;
padding-left:0;
}
#menubar ul li{
display:inline;
}
#menubar ul li a{
width:196px;
color:#FFF;
text-decoration:none;
float:left;
text-align:center;
line-height:40px;
}
#menubar ul li a:hover{
color:#39F;
background-color:#000;
}
#container{
width:980px;
height:538px;
background-color:#FC9;
}
#footer{
width:980px;
height:40px;
background-color:#333;
color:#fff;
text-align:center;
line-height:40px;
}
#content{
width:740px;
height:528px;
background-color:#FFF;
float:left;
margin:5px;
}
#sidebar{
width:225px;
height:528px;
background-color:#660;
float:left;
margin:5px 5px 5px 0;
}
layout1.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="banner">
MyCollege.com
</div>
<div id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
<div id="footer">
© 2015
</div>
</div>
</body>
</html>
Output :Click here
Developed by
