Shorthand Properties

CSS Cascading and Inheritance Level 3

Shorthand Properties

Some properties are shorthand properties, meaning that they allow authors to specify the values of several properties with a single property. A shorthand property sets all of its longhand sub-properties, exactly as if expanded in place.

For example, the CSS 2.1 ‘font’ property is a shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’, and ‘font-family’ all at once. The multiple declarations of this example:

h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;

can therefore be rewritten as

h1 { font: bold 12pt/14pt Helvetica }

When values are omitted from a shorthand form, unless otherwise defined, each “missing” sub-property is assigned its initial value.

This means that a shorthand property declaration always sets all of its subproperties, even those that are not explicitly set. Carelessly used, this might result in inadvertently resetting some sub-properties. Carefully used, a shorthand can guarantee a “blank slate” by resetting sub-properties inadvertently cascaded from other sources. For example, writing ‘background: green’ rather than ‘background-color: green’ ensures that the background color overrides any earlier declarations that might have set the background to an image.

In some cases, a shorthand might have different syntax or special keywords that don’t directly correspond to values of its sub-properties. (In such cases, the shorthand will explicitly define the expansion of its values.)

If a shorthand is specified as one of the CSS-wide keywords, it sets all of its sub-properties to that keyword. (Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)

Declaring a shorthand property to be ‘!important’ is equivalent to declaring all of its sub-properties to be “!important”.

Resetting All Properties: the ‘all’ property

Name: all
Value: initial | inherit | default
Initial: See individual properties
Applies to: See individual properties
Inherited: See individual properties
Percentages: See individual properties
Media: See individual properties
Computed value: See individual properties
Animatable: See individual properties

The ‘all’ property is a shorthand that resets all CSS properties. It only accepts the CSS-wide keywords.

For example, if an author specifies ‘all: default’ on an element it will block all inheritance and reset all properties, as if no rules appeared in the author level of the cascade.

This can be useful for the root element of a “widget” included in a page, which does not wish to inherit the styles of the outer page.

This articles from W3C:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s