Top 5 CSS Shorthand Properties
Posted on May 4, 2010 in Presentation by Jeff Starr
An excellent way to simplify and streamline your Cascading Style Sheets (CSS) is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties:
These are the top 5 on my list of most complicated and frequently used shorthand properties. There are others as well, even in CSS3, but I’ll save those for another post. Alright enough of my narcissistic ramblings – let’s do this thing!
Font Properties ↩
Styling fonts involves a number of individual properties. You can save quite a bit of space using shorthand notation, but be careful to include at least font-size and font-family (in that order). Here are all 6 of the font properties along with their default values:
/* font properties with default values */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium
These 6 declaration blocks can be combined into a single shorthand rule, ordered according to W3C specifications:
/* shorthand notation for font properties */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
/* EXAMPLES */
font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;
As you can see, a single line of code is used to replace an entire block. Far more elegant, if not slightly awkward looking. The more I use this syntax, the more I like it.
![Firefox Keyboard Shortcuts [ Macintosh Keyboard ]](http://perishablepress.com/press/wp-content/images/2008/fx-shortcuts/fx-shortcuts_01.jpg)
Before Summer arrives, I need to post the conclusion to my seasonal article,
While developing the
My current adventure into the fascinating realms of ![[ Image: inverted photo of a hard drive ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/annual-ritual.jpg)
![[ Image: HTC 8525 ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/8525-pocket-pc_.jpg)