Shortcut to converting to CSS shorthand

I’m sure I’m not the only one who started out with CSS longhand and slowly moved toward shorthand. If you are going through old code and converting it to shorthand, try this nice (quick!) trick for making Dreamweaver do the dirty work for you.

First of all, make sure your preferences are set up for shorthand by going to Preferences > CSS Styles.

Pick all the CSS that you would like to have made into shorthand.

Make sure you have Edit Using CSS checked for this to work. Click OK.

Now go to your style sheet and find the code you would like to convert to shorthand. If it’s a font then simply change the font-family: to font:, click on the CSS styles box, then double click on the style you just changed. When the CSS style dialog box comes up simply change or add one thing and click OK. All your font tags will be converted into the same tag.

For margins and padding you just have to open the CSS dialog box and fill in the empty boxes with 0. When you click OK, they will all be converted into shorthand for the tag you edited. I personally think it’s faster to convert margins and padding by hand, but it’s a nice time saver if you are already in the dialog box.


Sign up today to stay informed with industry news & trends