Shorthand CSS properties

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).

Related topics

  • About conflicting CSS rules
  • About the CSS Styles panel

Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Adding Content to Pages
Inserting and Formatting Text
Adding Audio, Video, and Interactive Elements
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly