CSS Shorthand

Do you feel like your cascading stylesheet is growing a bit too big? Have you learned how to write CSS in shorthand form? Would you like Dreamweaver to do it for you as well? With this tutorial, you'll learn how!

STEP ONE

Let's say for example that we will be adding a background image to a div. When using Dreamweaver, the CSS will be output as follows:

background-color: #000000;
background-image: url(images/header.gif);
background-repeat: no-repeat;

The above is considered the long form of CSS. Each property is defined separately. Let's make Dreamweaver use the shorthand form instead, which will result in the following:

background: #000000 url(images/header.jpg) no-repeat;

STEP TWO

Go to Edit > Preferences and choose the category of CSS Styles:

CSS Shorthand step 2

You can choose to use shorthand for specific properties or you can check off all of the available properties, it's really up to your preference. There's also an option for using shorthand if you're editing any previously defined rules.

My recommendation is that if you are a beginner and are still learning CSS, do not set the above options. Wait until you get a better grasp of CSS. Once you feel comfortable with each of the properties, then you can begin using CSS shorthand.

« More Dreamweaver tutorials