create custom theme in drupal 7

1. Create custom.info file

- Create a folder custom in your sites/all/themes folder

- Inside it create a file custom.info with these lines:

name = Custom Theme
core = 7.x
engine = phptemplate

2. Enable the theme

- Go to Appearence and click 'Enable and set default' for the Custom Theme.

3. Create page.tpl.php and style.css files

- Create a folder templates in your sites/all/themes/custom folder

- Inside it create a file page.tpl.php

- Now let's create our html document with this design in mind. Add the wrapper and navigation divs in the page.tpl.php:

<div id="wrapper">
  <div id="navigation"><?php if ($main_menu) { print theme('links__system_main_menu',array('links' => $main_menu)); } ?></div>
  <div id="header"><h1>BuyFlowers.com</h1></div>
  <div id="page-wrapper">
    <div id="sidebar"><?php if($page['sidebar_first']) { print render($page['sidebar_first']); } ?></div>
    <div id="content">
      <?php print $messages; ?>
      <h1><?php if($title) { print $title; } ?></h1>
      <div class="tabs"><?php if ($tabs) { print render($tabs); } ?></div>
      <?php print render($page['help']); ?>
      <ul class="action-links"><?php if($action_links) { print render($action_links); } ?></ul>
      <?php print render($page['content']); ?>
    </div>
  </div>
</div>

* { margin:0; padding: 0;} /* Clear all predefined margins and paddings to make it easier to style */

html { overflow-y: scroll;} /* Prevent page-shift to right when little or no content. */

body { font-family: Arial, sans-serif;} /* Change the default font to Arial. Generic sans-serif will be applied if Arial is not available */

a { color: #000; outline: none;} /* Remove dotted outline from links (might want to leave it for better usability). */

p { padding: 1em;}

/*** LAYOUT ***/

/* WRAPPER */
#wrapper { width: 1000px; margin: 0 auto;} /* Make it 1000px wide and center it */

/* NAVIGATION */
#navigation { width: 1000px; height: 50px; border: 1px solid #ccc; border-top: none; background-color: #eee;  } /* Define width, height, border and background color */

 #navigation ul { width: 400px;  margin: 0 auto; list-style: none; line-height: 50px;} /* list-style removes the dots, line-height centers the links vertically */

  #navigation ul li{ display: inline;} /* Spread the list elements horizontally */

/* HEADER */
#header { width: 1000px; height: 150px; border: 1px solid #ccc; border-top: none; background-color: #ddd; }
 #header h1 { line-height: 150px; padding: 0 0 0 60px; font-size: 40px;}

/* PAGE-WRAPPER */
#page-wrapper { width: 1000px; border: 1px solid #ccc; border-top: none; overflow: hidden;}

/* SIDEBAR */
#sidebar {  width: 260px; float: right; border-left: 1px solid #ccc;  background-color: #eee; padding: 20px 20px 10000px 20px;  margin-bottom: -10000px; }

/* CONTENT */
#content { margin-right: 300px; padding: 20px;}