mozilla

Revision 48867 of Shorthand properties

  • Revision slug: CSS/Shorthand_properties
  • Revision title: Shorthand properties
  • Revision id: 48867
  • Created:
  • Creator: Np
  • Is current revision? No
  • Comment /* Margin/Padding Properties */ i was wondering what those consonants had done to get in trouble

Revision Content

Why shorthand?

Most CSS developers will use shorthand versions of commonly used properties to save time and energy. Although these shorthand renditions may not be intuitive and will probably require some memorization, they definitely save precious keystrokes when creating large and complex style sheets.

Background Properties

A background with the following properties:

background-color: #000;
backgrond-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

Can be shortened to just one declaration:

background: #000 url(images/bg.gif) no-repeat top right;

(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

Font Properties

The following declarations:

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

can be shortened to the following:

font: italic bold .8em/1.2 Arial, sans-serif;

(This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / css3), font-stretch: normal (css3).)

Border Properties

With borders, the width, color and style can be simplified into one declaration. For example,

border-width: 1px;
border-style: solid;
border-color: #000;

Can be written as

border: 1px solid #000;

Margin/Padding Properties

Shorthand versions of margin and padding values work the same way. The following CSS declarations:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

are the same as the following declaration (note that the values are in clockwise order from top: top, right, bottom, then left (TRBL, the consonants in "trouble"))

margin: 10px 5px 10px 5px;

Revision Source

<p>
</p>
<h2 name="Why_shorthand.3F"> Why shorthand? </h2>
<p>Most CSS developers will use shorthand versions of commonly used properties to save time and energy.  Although these shorthand renditions may not be intuitive and will probably require some memorization, they definitely save precious keystrokes when creating large and complex style sheets.
</p>
<h2 name="Background_Properties"> Background Properties </h2>
<p>A background with the following properties:
</p>
<pre>background-color: #000;
backgrond-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;</pre>
<p>Can be shortened to just one declaration:
</p>
<pre>background: #000 url(images/bg.gif) no-repeat top right;</pre>
<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)
</p>
<h2 name="Font_Properties"> Font Properties </h2>
<p>The following declarations:
</p>
<pre>font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;</pre>
<p>can be shortened to the following:
</p>
<pre>font: italic bold .8em/1.2 Arial, sans-serif;</pre>
<p>(This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / css3), <code>font-stretch: normal</code> (css3).)
</p>
<h2 name="Border_Properties"> Border Properties </h2>
<p>With borders, the width, color and style can be simplified into one declaration.  For example,
</p>
<pre>border-width: 1px;
border-style: solid;
border-color: #000;</pre>
<p>Can be written as
</p>
<pre>border: 1px solid #000;</pre>
<h2 name="Margin.2FPadding_Properties"> Margin/Padding Properties </h2>
<p>Shorthand versions of margin and padding values work the same way.  The following CSS declarations:
</p>
<pre>margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;</pre>
<p>are the same as the following declaration (note that the values are in clockwise order from top: top, right, bottom, then left (TRBL, the consonants in "trouble"))
</p>
<pre>margin: 10px 5px 10px 5px;</pre>
Revert to this revision