CSS is pretty awesome. Can you image going back to tables for layouts??? Ugh. But CSS is so powerful that sometimes I find it can do so much more then I thought! Here’s a few super useful CSS properties to rock on your pages.

Remove Hover Quality on Input Forms

Browsers put a gross gold hover on input items on HTML forms. If you want to remove that, simply use:

input { outline:none; }

Then you can easily set the hover quality to whatever your heart desires (see below).

:hover & :focus

You already know about hover, but did you know its shy cousin :focus? It works just like hover, but for form inputs:

#divID:hover { cursor:pointer; }
input:focus { border:2px solid #327db4; }

Not allow resize of Textarea

If you want that textarea to not change size, there’s an easy CSS property.

resize: none

Using the :nth child Selector

This property isn’t quite as easy as the other ones, but extremely useful. You can use a number or a word or an equation.

.DivClass:nth-child(odd) { margin-right:0px;}
.DivClass:nth-child(3n+4) { margin-right:0px;}

For the equation, 3n+4, here’s the breakdown (since this is the hardest one to understand). Think of it like this: For every 3 child items, starting with the 4th item. But here’s the trickiness. It doesn’t actually start #4, it starts with the 3rd item. Whatever that last number is, subtract one, and that’s the item it will start on.

In fact, it works the same way when you just use a number:

.DivClass:nth-child(3) { margin-right:0px;}

It will actually apply to the second child item – and only the second child item for this one. If you want it to apply to all the second items, you’d use the equation: 2n+3 – so every 2 child items, and start on the second (even though it says 3) item.

If you want to test out what you’re using, here’s a useful site: Tryit Editor

Curved Corners

It used to be that curved corners on boxes were the bane of developer’s existence, but no more! It’s surprisingly simple to create:

-moz-border-radius: 5px; border-radius: 5px;

You’ll need both, just because it isn’t quite normalized across all browsers yet. To specify a particular corner, use the following:

-moz-border-top-right-radius: 5px; border-top-right-radius: 5px;

and replace top-right with bottom-right, bottom-left, etc.

Shadows

Drop shadows are cool, like bow-ties. For a simple drop shadow:

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

And yes, like the curved corners, you’ll need all of them. Kind of a bummer, but they work OK, so they’re still classified as cool in my book.

The first two numbers are the offset, the third is the blur radius, and the last is the color of the shadow. A negative number (for the first two) will make it go left and above the box respectively.

box-shadow: left offset, top offset, blur radius, shadow color.

Honestly, the best website for shadows is this one: http://www.css3.info/preview/box-shadow/

I regularly grab my CSS shadow code off their examples.

Summary

This is just a taste of some of the lesser known CSS superpowers, but I hope you find them as useful as I have!