Topsy Dreamweaver8.0: Shorthand CSS Properties

Source: Internet
Author: User
Tags html page dreamweaver

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.


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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.