Topsy Dreamweaver8.0: Shorthand CSS Properties

Css|dreamweaver|dreamweaver8

The CSS specification allows you to create styles using abbreviated syntax, called shorthand CSS. Shorthand CSS allows you to specify the values of multiple properties with one property tag. For example, you can use attributes to set,,,, font font-style font-variant font-weight font-size line-height and font-family properties in a single line of syntax.

A key issue to note when using shorthand CSS is that the value omitted from the shorthand CSS property is specified as the default value for the property. When two or more CSS rules are assigned to the same label, this may cause the page to not display correctly.

For example, the label shown below H1 uses the normal CSS syntax. Note that the,, font-variant font-stretch ,, font-size-adjust and font-style property values are specified as their default values.

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
}

This tag is rewritten with a shorthand attribute:

H1 {font:bold 16pt/18pt Arial}

When written with shorthand notation, the omitted values are automatically specified as their default values. Thus, the shorthand example omits font-variant , font-style ,, font-stretch and font-size-adjust labels.

If you have defined styles in more than one location using shorthand and normal forms of CSS syntax (such as embedding styles in an HTML page and importing styles from an external style sheet), be sure to note that the omitted attributes may overwrite (or cascade) properties that are explicitly set in other locations.

As a result, Dreamweaver uses the normal form of CSS notation to compose syntax by default. This prevents potential problems that can be overridden by shorthand rules that are common rules. When you open a Web page in Dreamweaver that uses shorthand CSS notation to write code, be aware that Dreamweaver will create a new CSS rule using normal form. You can specify the CSS editing preferences in the CSS styles category in Windows for Edit > Preferences, and in the Macintosh as "Dreamweaver" > Preferences, by changing the Preferences dialog box, Dreamweaver how CSS rules are created and edited.

Attention

The CSS styles panel creates rules using only common symbols. If you use the CSS styles panel to create a page or CSS style sheet, it's important to know that manual encoding of shorthand CSS rules can cause shorthand properties to overwrite properties that are created in plain form. Therefore, create your style using normal CSS symbols.