Shortcuts
In CSS, there are a numerous ways to code the same style. In the tutorial, I'll explain some of the most common shortcut structures that will allow you to make your css styles as small and effcient as possible.
Sponsors - Spoono Host
FontsWhen defining fonts, you can combine 4 of the most used css attributes into one. For instance, the old-school way of writing this font style:
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 16px;
can be written using shortcut methods as:font: bold 11px/16px verdana, sans-serif;
The attributes must be arranged in the same order or web browsers will get confused.
Hex-decimal ColorsColor attributes for all kinds of CSS styles can be written using defined using hex-decimal colors like color: #ff6600; for a shade of orange. Colors that are made up of pairs of repeated digits can be simplified by using 3 digits instead of all six. For instance, the orange hex-decimal code can be abbreviated as color: #f60;. Each digit represents two digits in the full hex-decimal code. So, if you what to use the color white in your code, don't use color: white; or color: #ffffff;. That's so 1997. Be cool and use color: #fff;. (And just like that you may have saved a character or three...great stuff).
BordersIf you were to right out the long-hand version of border code, it could take up some serious space. For example, just to define common attributes for a top border of something you could end up writing:border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;
That can be simplified to:border-top: 2px dashed #f00;
Additionally, if you are going to define all four borders you can just use one border attribute like:border: 2px dashed #f00;
Margins, Padding, and BordersMargins, padding, and borders all have similar CSS coding, such as:margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;
All four attributes can be defined in shortcut notation like this:margin: 10px 5px 20px 15px;
Note that the attributes go around clock-wise starting from the top. Margin, padding, and borders can be shorted further when some of the attributes are the same. Here is a list all four combinations of shorcuts:
4 Values: (margin: 20px 15px 10px 5px;) first - top, second - right, third - bottom, fourth - left.3 Values: (margin: 20px 15px 10px;) first - top, second - left & right, third - bottom.2 Values: (margin: 20px 15px;) first - top & bottom, second - left & right.1 Value: (margin: 10px;) first - top, right, bottom, & left
ZerosWhile we're talking about shortcuts, it's probably good to note that when defining any size attributes using px, em, pt, pc, in or what ever other measuring increment you wish to use, you can always leave off the measurement unit for values of 0 (ie: 0, 0px, 0em, and 0pt) are all the same. The only caveat is when you are defining with percentages. For reasons beyond our scope of knowlege, the powers that be at the W3C made it necessary to add the % sign to 0%. In some browsers, it doesn't matter. But to be safe, use 0% with combinations of other percentages.
CSS Shortcuts
