CSS Website Tutorial

link from http://www.entheosweb.com/tutorials/css/website.asp

We will split this web page into four parts :
› Header Area
› Preview Area
› Content Area
› Footer Area

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.

1
2
3

#wrapper{
   background:#1D4D6B;
}

HEADER AREA

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;
}

The Explanation

[ 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.

PREVIEW AREA

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.

Html Code for the Preview Area

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 -->

CSS Code for the Preview Area

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;
 }

The Explanation

[ 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.

CONTENT AREA

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.

The Html code for the Content Area

<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 -->

CSS code for the Content Area

#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; 
 }

The Explanation

[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.

FOOTER AREA

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.

Html Code for the Footer Area

<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>

CSS code for the Footer Area

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;
 }

The Explanation

[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.

Rajvinder Singh Tutorial

Pages

Tuesday, 18 December 2012