To limit the ability to resize the textarea just put this code:

textarea{
  resize: none;
}
OR
textarea{
  resize: vertical;
}
OR
textarea{
  resize: horizontal;
}

That’s it!

Many people have been wondering how to prevent your text from spanning the entire page when there are no spaces in the words. Well, here’s how you fix it: with one simple line of code in your css. All you have to do is add this line to the element containing the text.
For example:

div#comments{
word-wrap: break-word;
}

Voila! Problem solved!

1. Create an anchor tag:

   <a title="Home" href="index.php">Home</a>

2. Next, turn it into a block (with the same dimensions as the background image) and position the text offscreen:

   a[title="Home"]{
     display: block;
     width: 20px;
     height: 20px;
     text-indent: -9999px;
     overflow: hidden;
   }
   

3. Give it a background in css:

   background: url('images/home.png') no-repeat;

4. Next, give it a different background for when you hover:

   a[title="Home"]:hover{ 
     background: url('images/home-hover.png') no-repeat;
   }
   

   You’ll notice that even though the text is offscreen, the area where it would be is still an active link. However, it swaps the background image everytime you hover. Hence, creating an image rollover with just css. Have fun!

P.S. You could also use a sprite to accomplish this using the x and y coordinates.

If you want a really cool looking box shadow then check out this one:

div#content{
  -moz-box-shadow: 1px 1px #CCCCCC, 2px 2px #CCCCCC, 3px 3px #CCCCCC, 4px 4px #CCCCCC, 5px 5px #CCCCCC, 6px 6px #CCCCCC, 7px 7px #CCCCCC, 8px 8px #CCCCCC, 9px 9px #CCCCCC, 10px 10px #CCCCCC, 11px 11px #CCCCCC, 12px 12px #CCCCCC, 13px 13px #CCCCCC, 14px 14px #CCCCCC, 15px 15px #CCCCCC;
  -webkit-box-shadow: 1px 1px #CCCCCC, 2px 2px #CCCCCC, 3px 3px #CCCCCC, 4px 4px #CCCCCC, 5px 5px #CCCCCC, 6px 6px #CCCCCC, 7px 7px #CCCCCC, 8px 8px #CCCCCC, 9px 9px #CCCCCC, 10px 10px #CCCCCC, 11px 11px #CCCCCC, 12px 12px #CCCCCC, 13px 13px #CCCCCC, 14px 14px #CCCCCC, 15px 15px #CCCCCC;
  box-shadow: 1px 1px #CCCCCC, 2px 2px #CCCCCC, 3px 3px #CCCCCC, 4px 4px #CCCCCC, 5px 5px #CCCCCC, 6px 6px #CCCCCC, 7px 7px #CCCCCC, 8px 8px #CCCCCC, 9px 9px #CCCCCC, 10px 10px #CCCCCC, 11px 11px #CCCCCC, 12px 12px #CCCCCC, 13px 13px #CCCCCC, 14px 14px #CCCCCC, 15px 15px #CCCCCC;
}

Try it out and look at the result!

There is a cool css effect known as the box-shadow and it is cool!

This is the basic one:

div#content{
  -moz-box-shadow: 2px 2px 2px #333;
  -webkit-box-shadow: 2px 2px 2px #333;
  box-shadow: 2px 2px 2px #333;
}

The first value is the x-axis, the second is the y-axis and the third is the spread. Then you just set the colour.