Learn how to create a website using HTML and CSS Styles.
Below is the preview of the CSS website you will learn to create.
All the above Areas defined above are contianed inside a div with id wrapper
.
Define this <div id=wrapper
> just after the starting <body> tag.
Let’s have a look at the basic format of the webpage :
<body>
<div id=wrapper>
<!-- CODE FOR HEADER AREA -->
<!-- CODE FOR PREVIEW AREA -->
<!-- CODE FOR CONTENT AREA -->
<!-- CODE FOR FOOTER AREA -->
</div> <!-- #wrapper -->
</body>The CSS code for <div id=wrapper
> is to give it a Blue(#1D4D6B) background color. This background color gets applied to all the elements which are contained inside this wrapper div.
#wrapper{
background:#1D4D6B;
} Let’s start with the Header Area.
The Header Area consists of the Company Name and the Main Navigation Menu.
This Header is made using only four div elements.
› Left Header and Right Header div contained inside the Center Header div.
› The last div is the Main Header div that contains all the other three div’s inside it.
<div id=header>
<div id=center_header >
<div id=left_header >
Company Name
</div><!-- #left_header -->
<div id=menu >
<a href=home.html>Home</a>
<a href=About.html>About Us</a>
<a href=Services.html>Services</a>
<a href=Partners.html>Partners</a>
<a href=Contact.html>Contact Us</a>
</div><!-- #menu -->
</div><!-- #center_header -->
</div> <!-- #header -->The Header Area has two background colors. The lighter shade of blue color applied to the <div id=header
>.
The darker shade of blue color is applied to <div id=center_header
>. This div is positioned at the center of the webpage horizontally using the auto margin property. Now we’ll make the text Company Name big and the menu hover effect usign CSS styles.
We’ll add some space between the menu links using the padding property.
To make the Company Name text bigger we’ll have to define the font-size property for the <div id=left_header
>
#header{
background:#074266;
}
#center_header{
background:#053350;
height:100px;
margin:auto;
width:980px;
}
#left_header{
float:left;
font-size:40px;
line-height: 100px;
text-align: center;
width:370px;
}
#menu{
float:right;
height: 30px;
margin: 42px 0 0;
width: 530px;
}
#menu a{
color: #EEEEEE;
font-size: 15px;
font-weight: bold;
padding: 8px 12px;
}
#menu a:hover{
background: #1E90FF url(images/hover-menu-items.png) repeat-x;
}[ For header
div ]
Line 2 › background:#074266;
→ Applies a dark shade of Blue(#074266) to the div with id header
.
[ For center header
div ]
Line 5 › background:#053350;
→ To set the more darker Shade of Blue(#053350) to the div with id center_header
.
Line 6 › height:100px;
→ Sets the height of the center_header to 100 pixels.
Line 7 › margin:auto;
→ Centeres the center header
div horizontally .
→ Margin auto wont work if width is not specified.
Line 8 › width:980px;
→ Sets width to 980 pixels.
[ For left header
div ]
Line 11 › float:left;
→ Floats the left header
div to the left.
Line 12 › font-size:40px;
→ Set the font size to 40px to all the text inside left Header
.
Line 13 › line-height:100px;
→ To position the text in the middle (vertically).
Line 14 › text-align:center;
→ To position the text in the center (horizontally).
Line 15 › width:370px;
→ Sets width of the left header
div.
[ For menu
div ]
Line 18 › float:right;
→ Floats the menu
div to right.
Line 19 › height: 30px;
→ Sets the height of menu
div.
Line 20 › margin: 42px 0 0;
→ To position the div at the middle (vertically) inside the center header
div.
Line 21 › width: 530px;
→ Sets the width of menu
div.
[ For all anchor tags a
inside menu
div ]
Line › color: #EEEEEE;
→ Sets the text color to Light Cement(#EEEEEE) Color.
Line › font-size: 15px;
→ Sets the font size.
Line › font-weight: bold;
→ Makes the text look little bolder.
Line › padding: 8px 12px;
→ To provide space of 12 pixels between two links and 8 pixel spacing at the top and bottom of the link.
[ For Hover Effect on a
tags inside the menu
div ]
Line 30 › background: #1E90FF url(images/hover-menu-items.png) repeat-x;;
→ Changes the background of the links on mouse hover.
→ This is the image used. 
The Preview Area contains three transparent boxes. These boxes show some part(3-4 lines) of the complete topic and have a [ more ] link that links to the original topic.
The transparency is applied using a transparent image.
The three preview boxes are contained inside the div with id center_preview
, and center_preview
div is contained inside preview
div. Each preview box has an id topic
.
<div id=preview>
<div id=center_preview >
<div id="topic">
<h2>Topic 1</h2>
<p>
Some Description about the Topic 1. Some Description about the Topic 1.
Some Description about the Topic 1. Some Description about the Topic 1.
Some Description about...<a href=#>[read more] </a>
</p>
</div> <!-- #topic -->
<div id="topic">
<h2>Topic 2</h2>
<p>
Some Description about the Topic 2. Some Description about the Topic 2.
Some Description about the Topic 2. Some Description about the Topic 2.
Some Description about the Topic 2. Some Description about the Topic 2.
Some Description about the topic 2.
S...<a href=#>[read more] </a>
</p>
</div> <!-- #topic -->
<div id="topic">
<h2>Topic 3</h2>
<p>
Some Description about the Topic 3. Some Description about the Topic 3.
Some Description about the Topic 3. Some Description about the Topic 3.
Some Description about the Topic 3. Some Description about the Topic 3.
Some Description about the Topic 3. Some Description about the Topic 3.
Some Description about the Topic 3.
Some Description abou...<a href=#>[read more] </a>
</p>
</div> <!-- #topic -->
</div><!-- #center_preview -->
</div> <!-- #preview -->The Preview Area and the three text boxes have a background image. The text box background image is a png format. The image can be made more transparent using image editors. Only png and gif formats support transparency without using CSS. The jpg format does not support transparency, but it can be made transparent using CSS Opacity Property.
#preview{
color:#EEEEEE;
height: 300px;
}
#center_preview{
height:300px;
width:980px;
margin:0 auto;
background: url(images/wave.png) ;
}
#topic{
background: url(images/topic.png) repeat;
width:300px;
float:left;
font-size: 13px;
margin:40px 10px 10px 10px;
border: 1px solid #444;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#topic h2{
width:200px;
padding: 10px 0 0 50px;
}
#topic p{
padding: 5px 10px 10px 10px;
line-height: 20px;
}
#topic a{
color:#FFFFFF;
font-weight: bold;
}[ For preview
div ]
Line 3 › color:#EEEEEE;
→ Sets the color of all the text inside the preview
div to Light Cement(#EEEEEE) Color;
Line 4 › height: 300px;
→ Sets the height of the Preview Area.
[ For center_preview
div ]
Line 7 › height:300px;
→ Sets the height of the center_preview
Area div.
Line 8 › width:980px;
→ Sets the width to 980 pixels.
Line 9 › margin:0 auto;
→ To center the div horizontally.
Line 10 › background: url(images/wave.png) ;
→ Background
[ For topic
div ]
Line 13 › background: url(images/topic.png) ;
→ Sets the transparent png
format image background . → The image is repeated in both direction by default.
Line 14 › width:300px;
→ Sets the width of topic
div to 300 pixel.
Line 15 › float:left;
→ To align the div horizontally.
Line 16 › font-size: 13px;
→ Sets the font size to 13pixels.
Line 17 › margin:40px 10px 10px 10px;
→ Sets the spacing between the preview
div and the topic
div.
Line 18 › border: 1px solid #444;
→ Sets 1 pixel border to the topic
div.
Line 19 › border-radius: 10px;
Line 20 › -moz-border-radius: 10px;
Line 21 › -webkit-border-radius: 10px;
→ Border radius Property for all the browsres. → It makes the corners round in shape.
[For all the H2
tags Inside topic
div ]
Line 25 › width:200px;
→ To change the default width for the H2
tag of 100%.
Line 26 › padding: 10px 0 0 50px;
→ To move the text inside the H2
tags to the right.
[For all the p
tags Inside topic
div ]
Line 29 › padding: 5px 10px 10px 10px;
→ To provide space between the text and the container topic
div.
Line 30 › line-height: 20px;
→ Sets the line height for all the text inside the p
tag.
[For all the a
tags Inside topic
div ]
Line 33 › color:#FFFFFF;
→ Sets White(#FFFFFF) color text for the links inside the topic
div.
Line 34 › font-weight: bold;
→ To increase the boldness of the link text.
The Content Area has a Sidebar on the left that contains links to other pages.
The div on the right is the main content box.
<div id="container">
<div id="center_container">
<div id="sidebar">
<div id="title">Sidebar</div>
<ul>
<li><b>Website Link</b>
Links Description....<a href=#>[more] </a> </li>
<li><b>Website Link</b>
Links Description....<a href=#>[more] </a> </li>
<li><b>Website Link</b>
Links Description....<a href=#>[more] </a> </li>
<li><b>Website Link</b>
Links Description....<a href=#>[more] </a> </li>
<li><b>Website Link</b>
Links Description....<a href=#>[more] </a> </li>
<li><b>Website Link</b>
Links Description....<a href=#>[more] </a> </li>
<li><b>Website Link</b>
Links Description....<a href=#>[more] </a> </li>
</ul>
</div> <!-- #sidebar -->
<div id="content">
<h2>Welcome to Our Website</h2>
<p>Description of the website. Description
of the website. Description of the website.
Description of the website. Description of
the website. Description of the website. Description
of the website. Description of the website.
Description of the website. Description of the website.
Description of the website. Description of the website. </p>
<div id="left_list">
<ul>
<li><a href=# >Contents List Items</a></li>
<li><a href=# >Contents List Items</a></li>
<li><a href=# >Contents List Items</a></li>
<li><a href=# >Contents List Items</a></li>
</ul>
</div> <!-- #left_list -->
<div id="right_list">
<ul>
<li><a href=# >Contents List Items</a></li>
<li><a href=# >Contents List Items</a></li>
<li><a href=# >Contents List Items</a></li>
<li><a href=# >Contents List Items</a></li>
</ul>
</div> <!-- #right_list -->
</div> <!-- #content -->
</div> <!-- #center_conatiner -->
</div> <!-- #container --> #container{
height: 320px;
}
#center_container{
background:#DDD;
height:320px;
width: 980px;
margin: 0 auto;
}
#sidebar{
float:left;
width:280px;
margin:10px;
padding-bottom: 10px;
background:#EEE;
}
#sidebar #title{
line-height: 30px;
padding: 0 0 0 15px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
background: url(images/title.png) repeat-x;
}
#sidebar ul{
list-style: none;
width:280px;
}
#sidebar li{
padding:5px 5px;
font-size: 13px;
}
#sidebar a{
color:#000;
}
#content{
width:670px;
height:300px;
margin:10px 10px 10px 0;
background: #EEE;
font-size:14px;
float:right;
}
#content h2{
padding: 10px 0 10px 20px;
}
#content p{
margin:15px;
}
#left_list, #right_list{
width:270px;
float:left;
margin: 10px 10px 20px 50px;
}
#left_list ul, #right_list ul{
list-style:url(images/li.png);
}
#left_list a, #right_list a{
line-height: 30px;
}[For the container
div]
Line › height: 320px;
→ Sets the height of the container to 320 pixels.
[For center_container
div ]
Line › background:#DDD;
→ Sets Light Grey(#DDDDDD) color to the background.
Line › height:320px;
→ Sets height of center_container
to 320 pixels.
Line › width: 980px;
→ Sets width to 980 pixels.
Line › margin: 0 auto;
→ Sets spacing only on left and right side of the center_container
.
→ To position the div at the center Horizontally.
[For sidebar
div]
Line › float:left;
→ To position the sidebar
div on the left side .
Line › width:280px;
→ Width of the sidebar
div.
Line › margin:10px;
→ Creates spacing of 10 pixels on each side of the sidebar
.
Line › padding-bottom: 10px;
→ For spacing between the text and the sidebar
div at the bottom portion of the sidebar
.
Line › background:#EEE;
→ Lightest Grey(#EEEEEE) Color for the background color.
[For title
div inside sidebar
div ]
Line › line-height: 30px;
→ Sets Line Height to 30 pixels for the text inside the title
div.
Line › padding: 0 0 0 15px;
→ To create spacing on the left side of title
.
→ The spacing values for top, right, bottom is zero pixel.
Line › margin-bottom: 10px;
→ For spacing between the title
div and the text inside the sidebar
..
Line › font-size: 16px;
→ Sets font size to 16 pixels.
Line › font-weight: bold;
→ To make the text bold style.
Line › background: url(images/title.png) repeat-x;
→ A 12 X 30 pixel image is repeated along x-axis for the background.
→ The padding, line-height are affected by the background image.
→ The margin is not affected by the background image.
[ For all ul
tags inside sidebar
div ]>
Line › list-style: none;
→ Removes the bullet listing style.
Line › width:280px;
→ Sets the width of the ul
html element same as the width of sidebar
.
[ For all li
items inside sidebar
div ]
Line › padding:5px 5px;
→ For spacing between two li
elements on all sides .
Line › font-size: 13px;
→ Reduces the font size to 13 pixels.
[ For all a
tags inside sidebar
div ] Line › color:#000;
→ Sets the text color of all the anchor a
elements inside the sidebar
div to Black(#000000).
[ For content
div ]
Line › width:670px;
Line › height:300px;
→ Sets width and height of the content
div.
Line › margin:10px 10px 10px 0;
→ For spacing between content
and the center_container
on top,right and bottom portion.
Line › background: #EEE;
→ Sets the background color.
Line › font-size:14px;
→ Sets the font size of the text inside the content
div.
Line › float:right;
→ To align the content
div on the right side of center_container
div.
[ For all h2
tags inside content
div ]
Line › padding: 10px 0 10px 20px;
→ Sets spacing on top, bottom and left side of the h2
tag element.
[ For all P
tags inside content
div ]
Line › margin:15px;
→ To provide spacing between p
tag element and content
div.
[ For left_list
and right_list
contained inside content
div ]
Line › width:270px;
→ Sets the width of both divs to 270px;
Line › float:left;
→ To align the left_list
and right_list
horizontally .
Line › margin: 10px 10px 20px 50px;
→ Provides spacing between the left_list
, right_list
and the parent content
div element. → The values are applied clockwise starting from the top.
[ For all ul
tags inside left_list
and right_list
div ]
Line › list-style:url(images/li.png
);
→ Replaces the bullet style with an image.
[ For all a
tags inside left_list
and right_list
div ]
Line › line-height: 30px;
→ Sets the height of all the anchor a
tags to 30px.
The footer area is made usign two div’s.
The left footer area contains the links to the social network sites.
The right footer area contains the footer menu and the copyright information.
<div id="footer">
<div id="center_footer">
<div id="left_footer"><b>Find Us On</b>
<ul>
<li> <a href=#><img src=images/facebook.png /></a> </li>
<li> <a href=#> <img src=images/twitter.png /> </a> </li>
<li> <a href=#> <img src=images/youtube.png /> </a> </li>
<li> <a href=#> <img src=images/rss.png /> </a> </li>
</ul>
</div>
<div id="right_footer">
<a href=home.html>HOME</a>
<a href=about.html>ABOUT US</a>
<a href=services.html>SERVICES</a>
<a href=partners.html>PARTNERS</a>
<a href=contact.html>CONTACT US</a>
</div>
<span>© Your Website Name 2011 </span>
</div>
</div>The footer
div contained inside the wrapper
div has a dark blue(#1D4D6B) background shade.
The center_footer
div contained inside the footer
div has a black(#000000) colored background. We’ll position the Social Networking icons inside the <ul> </ul> tags horizontally.
#footer{
height:130px;
}
#center_footer{
background:#000;
height: 130px;
width: 980px;
margin:0 auto;
}
#left_footer,#right_footer {
width:450px;
padding:20px;
float:left;
}
#left_footer b{
color:#fff;
}
#left_footer li{
float:left;
margin:0 20px;
}
#left_footer img{
width:60px;
height:60px;
}
#right_footer{
float:right;
}
#right_footer a{
color:#aaa;
padding:0 10px;
line-height: 21px;
font-size: 13px;
font-weight:bold;
}
#footer span{
color:#ccc;
font-size: 13px;
margin-left: 150px;
}[For footer
div]
Line 3 › height:130px;
→ Sets the height of the footer
div.
[For center_footer
div ]
Line 6 › background:#000;
→ Sets Black(#000000) Colored background for the center_footer
div.
Line 7 › height: 130px;
Line 8 › width: 980px;
→ Width and height of the footer.
Line 9 › margin:0 auto;
→ Works with the width to position the center_footer
at the center horizontally.
[For both left_footer & right_footer
div ]
Line 12 › width:450px;
→ Sets the widht of 450 pixel for both left_footer & right_footer
div.
Line 13 › padding:20px;
→ Padding space inside the two divs.
Line 14 › float:left;
→ So the divs position themselves in single row horizontally.
[ For all b
tags inside left_footer
div ]
Line 17 › color:#fff;
→ Sets White(#FFFFFF) color for all the text inside b
tag elements.
[For li
tags inside left_footer
div ]
Line 20 › float:left;
→ To stack the social networking icons to the left side of the webpage.
Line 21 › margin:0 20px;
→ To set the spacing between the social icons.
[ For img
tags inside left_footer
div ]
Line 24 › width:60px;
Line 25 › height:60px;
→ Width and height of the social networking icons.
[For right_footer
div ]
Line 28 › float:right;
→ To position the right_footer
div to the right side of the footer
div.
[ For all a
tags inside right_footer
div ]
Line 31 › color:#aaa;
→ Sets the color of all the links in the right_footer
div.
Line 32 › padding:0 10px;
→ For Spacing between the links .
Line 33 › line-height: 21px;
→ Sets the line height of the links.
Line 34 › font-size: 13px;
→ Sets the font size of the links to 13 pixels.
Line 35 › font-weight:bold;
→ To make the text look bolder.
[For the span
tags inside footer
div ]
Line 38 › color:#ccc;
→ To make Light Grey(#CCCCCC) Colored text inside any span
element that exist in the footer
div.
Line 39 › font-size: 13px;
→ Sets the fonts size to 13 pixels.
Line 40 › margin-left: 150px;
→ Positions the text inside span
element 150 pixels from the left.
