Previously I wrote about how to shorten your CSS rules with padding and margin. Here are two other ways of reducing your rules and making your stylesheets less cluttered.

Border

If you have a container with a border that is one pixel wide, black and is the same for all four sides you can write it like this:

.myborder {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}

Or you can shorten the rule by writing it like this:

.myborder {
border: solid 1px #000;
}

Since all the values are shared for all four edges it is much easier to write the rule for all four at once.

Color

You may have also noticed that I shortened the hex value for the color from #000000 to just #000. Hexadecimal colors are written using six numbers or letters to declare the color. The 1st and 2nd are the red value. the 3rd and 4th are the green value and the 5th and 6th are the blue value. If the character is the same within these pairs then you can just write the one value and omit it’s identical twin.