CSS Shortcuts

Sunday, 18 September 2005 17:08

Color Shortcuts

When digging through other people's css (people who are better than you, at least in CSS), have you seen this:

color:#33e

"But i've always learned there were 6 places for a hex value!" Well you know that the hex is RGB R(xx) G(xx) B(xx). The shortcut is, if the two values are going to be the same for each channel then you can just use one. As in the above example its the same as saying:  

color: #3333ee;.

Examples:

color: #03f = #0033ff
color: #eb4 = #eebb44

Font Shortcuts

font: 11px/13px Verdana, sans-serif

"What the heck? Are why is there two pixel values?" The first one is telling you that the TEXT is going to be 11px. The 13px tells you that the line-height is going to be 13px! That's easy enough! You can mix and match units too: for example: 10px/1.5em. This is text of 10px with a line-height of 1.5em. So this way you dont have to make a new CSS declaration for line-height: 1.5em because you've already declared it with the shortcut method.

margin: 30px 10px

This shortcut will work with any CSS attribute that will allow you to specify a top, right, bottom, left values. Those being: margin, padding, border and let's hope I didn't leave anything out. Let's say you wanted a top margin of 10px, right of 5px, bottom of 10px and left of 5px. Easy enough... you could write:

The Long Way

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

(Whew!) OR

The Grouped Method

margin: 10px 5px 10px 5px; Much better! Now you may know that when using the grouped metho you always start at the top and go clockwise. So those values are for: top, right, bottom, left respectively. Notice values opposite of each other are the same. Top and bottom are both 10px and both left and right are 5px. Only when they are opposites can you use this shortcut. Using our example, we can use the new short cut to make our CSS read: margin: 10px 5px Always start with your top value. In our case top is 10px so we can group top to bottom and left to right.

examples:

padding: 5px 8px  

Is the same as

padding: 5px 8px 5px 8px;