The CSS specification allows styles to be created using a shorthand syntax called shorthand CSS. Shorthand CSS allows you to specify the value of multiple properties with a single property tag. For example, you can use the font property to set the font-style, font-variant, font-weight, font-size, line-height, and font-family properties in one line syntax.
The key issue to note when using shorthand CSS is that omitted values from shorthand CSS properties are assigned the default value for the property. When two or more CSS rules are assigned to the same tag, this may cause the page to not display correctly.
For example, the H1 tag shown below uses normal CSS syntax. Note that the values for the font-variant, font-stretch, font-size-adjust, and font-style properties are assigned their default values.
H1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Let's rewrite this tag using a shorthand attribute:
H1 { font: bold 16pt/18pt Arial }
When written using shorthand notation, omitted values are automatically assigned their default values. Therefore, the above shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.
If you use the shorthand and normal forms of CSS syntax to define styles in more than one place (such as embedding styles in an HTML page and importing styles from an external style sheet), be aware that omitted attributes may override (or cascade) the styles in Properties that are explicitly set elsewhere.
Therefore, Dreamweaver uses the normal form of CSS symbols for writing syntax by default. This prevents potential problems caused by shorthand rules that override ordinary rules. When you open a Web page in Dreamweaver that is coded using shorthand CSS notation, be aware that Dreamweaver will use the normal form to create new CSS rules. You can change the CSS editing preferences in the CSS Styles category of the Preferences dialog box (Edit>>Preferences on Windows; Dreamweaver>>Preferences on Macintosh). Specify how Dreamweaver creates and edits CSS rules.
Notice
The CSS Styles panel creates rules using only normal symbols. If you use the CSS Styles panel to create a page or CSS style sheet, be aware that hand-coding shorthand CSS rules can cause shorthand properties to override those created in the normal form. Therefore, use ordinary CSS symbols to create your styles.