Firstly, lets create our box. We'll make a div and give it the imaginative name "box".

<div class="box">This is a box</div>

Now we need to give it some style using CSS. In your stylesheet add the following:

.box {
  width:150px;
  height:150px;
  background:#f60;
  }

If you view your page now then you should have a 150 pixel by 150 pixel orange square.

Now we need to add another div which will serve as the drop shadow. Put a second box around the orange one by changing your HTML to the following:

<div class="box-outer">
  <div class="box">This is a box with a drop shadow!</div>
</div>

In your stylesheet add the following:

.box-outer {
  width:150px;
  height:150px;
  background:#333;
  }

This gives the outer box exactly the same shape and size as the orange one, but with a different color.

If you view your page now, you'll see that the outer box doesn't appear. This is because the orange one is inside it, and as the size is the same it fills the box-outer div entirely.

What we need to do is move the outer div slightly to create the effect of a drop shadow. In your CSS change the orange box style to:

.box {
  position:relative;
  top:-3px;
  left:-3px;
  width:150px;
  height:150px;
  background:#f60;
  }
 
This tells the browser to position it relative to the div that contains it (box-outer), and move it -3 pixels to the top and -3 pixels to the left.

Take a look at it now, and you'll see that you have an orange box with a drop shadow to the left and bottom of it.

You can change any of the style rules to however you please, you could even get adventurous and use background images to create some great effects!