Shorthand CSS properties

The CSS specification allows for the creation of styles using an abbreviated syntax known as shorthand CSS. Shorthand CSS lets you specify the values of several properties using a single property tag. For example, the font property lets you set font-style, font-variant, font-weight, font-size, line-height, and font-family properties within a single line of syntax.

A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS property are assigned their default value. This may cause pages to be incorrectly displayed when two or more CSS rules are assigned to the same tag.

For example, the H1 tag shown below uses longhand CSS syntax. Note that the font-variant, font-stretch, font-size-adjust, and font-style properties have been 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

}

Rewritten as a single, shorthand property, the same tag appears as follows:

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

When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the previous shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.

If you have styles defined in more than one location (for example, both embedded in an HTML page and imported from an external style sheet) using both the short and long forms of CSS syntax, be aware that omitted properties may override (or cascade) properties that are explicitly set in another.

For this reason, Dreamweaver uses the long form of CSS notation by default. This prevents possible problems caused by a shorthand rule overriding a longhand rule. If you open a web page that was coded with shorthand CSS notation in Dreamweaver, be aware that Dreamweaver will create any new CSS rules using the longhand form. You can specify how Dreamweaver creates and edits CSS rules by changing the CSS editing preferences in the CSS Styles category of the Preferences dialog box (Edit > Preferences in Windows; Dreamweaver > Preferences on the Macintosh).

NOTE

The CSS Styles panel creates rules using only longhand notation. If you create a page or CSS style sheet using the CSS Styles panel, be aware that hand coding shorthand CSS rules may result in the shorthand properties overriding those created in longhand form. For this reason, use longhand CSS notation to create your styles.

Shorthand CSS properties

Shorthand CSS properties

Related topics