You are here : : Home > Free Resources > CSS Tutorials > CSS Website Tutorial |
Free Web Design Resources
Below is the preview of the CSS website you will learn to create.
We will split this web page into four parts :
› Header Area
› Preview Area
› Content Area
› Footer Area
wrapper.
wrapper> just after the starting <body> tag.
1 2 3 4 5 . . . . . . 12 13 14 15
<body><div id=</body>wrapper> <!-- CODE FOR HEADER AREA --> <!-- CODE FOR PREVIEW AREA --> <!-- CODE FOR CONTENT AREA --> <!-- CODE FOR FOOTER AREA --> </div> <!-- #wrapper -->
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.
1 2 3
#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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<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 -->
header>.
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.
left_header>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
#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
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
#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;
}
previewdiv ]
previewdiv to Light Cement(#EEEEEE) Color;
center_previewdiv ]
center_previewArea div.
topicdiv ]
pngformat image background . → The image is repeated in both direction by default.
topicdiv to 300 pixel.
previewdiv and the
topicdiv.
topicdiv.
H2tags Inside
topicdiv ]
H2tag of 100%.
H2tags to the right.
ptags Inside
topicdiv ]
topicdiv.
ptag.
atags Inside
topicdiv ]
topicdiv.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
<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 -->
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
#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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
#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.
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.