User:Lombardp

  • Revision slug: User:Lombardp
  • Revision title: User:Lombardp
  • Revision id: 193669
  • Created:
  • Creator: Lombardp
  • Is current revision? No
  • Comment /* Box model */

Revision Content

Welcome visitor, at present this page is quite empty, but I am just at the beginning. Trust me, I will be of some use for Mozilla...

Now I will use this page to test my very first contribution to the Mozilla Developer Wiki.

CSS-2 Quick Reference

Box model

margin-top : length | percentage | auto; margin-right : length | percentage | auto; margin-bottom : length | percentage | auto; margin-left : length | percentage | auto;

  • length : Absolute value.
  • percentage : Value relative to size of containing block.
  • auto : See box model specification for details.
  • Examples
    • margin-top: 1em;

margin : margin-top margin-right margin-bottom margin-left;

  • Tips and FAQs
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • margin-top: 1em;
    • margin: 10px;
    • margin: 0px 4px 0px 4px;
    • margin: 0px auto 0px auto;

padding-top : length | percentage; padding-right : length | percentage; padding-bottom : length | percentage; padding-left : length | percentage;

  • length : Absolute value.
  • percentage : Value relative to size of containing block.
  • Examples
    • padding-top: 1em;

padding : padding-top padding-right padding-bottom padding-left;

  • Tips and FAQs
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • padding: 10px;
    • padding: 0px 4px 0px 4px;
    • padding: 0px auto 0px auto;

border-top-width : thin | medium | thick | length; border-right-width : thin | medium | thick | length; border-bottom-width : thin | medium | thick | length; border-left-width : thin | medium | thick | length;

  • length : Absolute value.
  • Examples
    • border-top-width: 1px;

border-width : thin | medium | thick | length;

  • Tips and FAQs
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • border-width: 1px;
    • border-width: 1px 2px 1px 2px;

border-top-color : color | transparent; border-right-color : color | transparent; border-bottom-color : color | transparent; border-left-color : color | transparent;

  • color : Color name or RGB value.
  • Examples
    • border-top-color: red;
    • border-bottom-color: #00ff00;

border-color : border-top-color border-right-color border-bottom-color border-left-color;

  • Tips and FAQs
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • border-color: red;
    • border-color: #336699;
    • border-color: green white red #0000ff;

border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;

  • Examples
    • border-top-style: red;
    • border-bottom-style: #00ff00;

border-style : border-top-style border-right-style border-bottom-style border-left-style;

  • Tips and FAQs
    • If there is only one value, it applies to all sides.
    • If there are two values, the first is for top and bottom, the second is for left and right.
    • If there are three values, the first is for top, the second is for left and right, the third is for bottom.
  • Examples
    • border-style: solid;
    • border-style: solid dotted;

border-top : border-width border-style border-color; border-right : border-width border-style border-color; border-bottom : border-width border-style border-color; border-left : border-width border-style border-color; border : border-width border-style border-color;

  • border-width : Single width value, see above.
  • border-style : Single style value, see above.
  • border-color : Single color value, see above.
  • Examples
    • border-top: 1px solid black;
    • border: 3px double #33ff33;

Colors and Backgrounds

color : color;

  • color : color-name | color-value
    • color-name : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.
    • color-value : rgb values in one of this formats, #336699, #369, rgb(51,102,153), rgb(30%,60%,100%).
  • Examples
    • color: #ff0000;
    • color: #fff;
    • color: #ff0000;
    • color: rgb(0,255,0);

background-color : color | transparent;

  • color : see above.
  • Examples
    • background-color: #ff0000;
    • background-color: transparent;

background-image : uri | none;

  • uri : a valid Uniform Resource Identifier, double quoted or not.
  • Examples
    • background-image: url(./img/metal.png);
    • background-image: url("wood.png");
    • background-image: none;

background-repeat : repeat | repeat-x | repeat-y | no-repeat;

  • repeat : background image is tiled in both X and Y direction.
  • repeat-x : background image is tiled only in X direction.
  • repeat-y : background image is tiled only in Y direction.
  • no-repeat : background image is not tiled.
  • Examples
    • background-repeat: no-repeat;
    • background-repeat: repeat-y;

background-attachment : scroll | fixed;

  • scroll : background image scrolls along with the containing block.
  • fixed : background is fixed with respect to viewport.
  • Examples
    • background-attachment: fixed;
    • background-attachment: scroll;

background-position : {{mediawiki.external('<i>percentage</i> | <i>length</i> | <i>left</i> | <i>center</i> | <i>right</i>')}} {{mediawiki.external('<i>percentage</i> | <i>length</i> | <i>top</i> | <i>center</i> | <i>bottom</i>')}}  ;

  • percentage : position in percentage from left/top border.
  • length : absolute position from left/top border.
  • Tips and FAQs
    • When two length values are specified, the first is for horizontal position.
    • right bottom is equivalent to 100% 100%.
    • If background-attachment is scroll, position is relative to padding border, else if it is fixed, position is relative to viewport.
  • Examples
    • background-position: right top;
    • background-position: 100% 100%;

background : background-color background-image background-repeat background-attachment background-position;

  • Examples
    • background: red;
    • background: #ffffff url("mybkg.png") repeat-y fixed 50%;
    • background: #000000 url("flag.png") no-repeat right top;

Font

font-family: family-name | generic-family, family-name | generic-family, ... ;

  • family-name : 'Gill','Helvetica','Verdana',...
  • generic-family : serif,sans-serif,cursive,fantasy,monospace
  • Tips and Common errors
    • The style sheet designer should provide a list of family-names with at least one commonly available family and eventually at least one generic-family.
    • Family-names with withespaces and/or special chars should be placed inside quotes.
    • Generic-family are keywords and must not be quoted
  • Examples
    • font-family: Gill, Helvetica, sans-serif;
    • font-family: 'Comic Sans MS', fantasy;

font-style: normal | italic | oblique;

  • Examples
    • font-style: italic;

font-variant: normal | small-caps;

  • Examples
    • font-variant: small-caps;

font-weight: normal | bold | bolder | lighter | 100 | ... | 900;

  • Tips and Common errors
    • Numerical values are alternative to previous keywords, 400 is equivalent to normal and 700 is equivalent to bold.
    • Bolder and lighter are relative to the inherited value.
  • Examples
    • font-weight: bold;

font-size: absolute-size | relative-size | length | percentage;

  • absolute-size : xx-small | x-small | small | medium | large | x-large | xx-large
  • relative-size : larger | smaller
  • length
    • Relative to medium : 10px, 0.5em, 1ex
    • Absolute physical: 0.5in, 1cm, 8mm, 12pt, 1pc
  • percentage : 40%
  • Tips and Common errors
    • For screen output, a Relative Length value (e.g. 12px) should be used, while for printed medium an Absolute Length value (e.g. 12pt) is better.
  • Examples
    • font-size: 1.5em;
    • font-size: 150%;
    • font-size: 16px;

font: {{mediawiki.external('<i>font-style</i> <i>font-variant</i> <i>font-weight</i>')}} font-size {{mediawiki.external('<i>/line-height</i>')}} font-family;

  • font-style,font-variant,font-weight,font-size,font-family : see above.
  • line-height : same numeric format of font-size.
  • Tips and Common errors
    • If you set and individual font property (font-weight: bold;) and then you set other properties with this complete format (font: italic 12px Verdana;), remember that the previous style is overridden by the last. You have two options: set individual property after complete format style, or use complete format only.
  • Examples
    • font: bold italic 12px Verdana;
    • font: 12px/14px sans-serif;
    • font: 80% sans-serif;
    • font: bold large Palatino, serif;

Revision Source

<p>Welcome visitor,
at present this page is quite <i>empty</i>, but I am just at the beginning. Trust me, I will be of some use for Mozilla...
</p><p>Now I will use this page to test my very first contribution to the Mozilla Developer Wiki.
</p>
<h3 name="CSS-2_Quick_Reference"> CSS-2 Quick Reference </h3>
<h4 name="Box_model"> Box model </h4>
<p><b>margin-top : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b>
<b>margin-right : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b>
<b>margin-bottom : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b>
<b>margin-left : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b>
</p>
<ul><li> <i>length</i> : Absolute value.
</li><li> <i>percentage</i> : Value relative to size of containing block.
</li><li> <i>auto</i> : See box model specification for details.
</li><li> <i>Examples</i>
<ul><li> <code>margin-top: 1em;</code>
</li></ul>
</li></ul>
<p><b>margin : <i>margin-top</i> <i>margin-right</i> <i>margin-bottom</i> <i>margin-left</i>;</b>
</p>
<ul><li> <i>Tips and FAQs</i>
<ul><li> If there is only one value, it applies to all sides.
</li><li> If there are two values, the first is for top and bottom, the second is for left and right.
</li><li> If there are three values, the first is for top, the second is for left and right, the third is for bottom.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>margin-top: 1em;</code>
</li><li> <code>margin: 10px;</code>
</li><li> <code>margin: 0px 4px 0px 4px;</code>
</li><li> <code>margin: 0px auto 0px auto;</code>
</li></ul>
</li></ul>
<p><b>padding-top : <i>length</i> | <i>percentage</i>;</b>
<b>padding-right : <i>length</i> | <i>percentage</i>;</b>
<b>padding-bottom : <i>length</i> | <i>percentage</i>;</b>
<b>padding-left : <i>length</i> | <i>percentage</i>;</b>
</p>
<ul><li> <i>length</i> : Absolute value.
</li><li> <i>percentage</i> : Value relative to size of containing block.
</li><li> <i>Examples</i>
<ul><li> <code>padding-top: 1em;</code>
</li></ul>
</li></ul>
<p><b>padding : <i>padding-top</i> <i>padding-right</i> <i>padding-bottom</i> <i>padding-left</i>;</b>
</p>
<ul><li> <i>Tips and FAQs</i>
<ul><li> If there is only one value, it applies to all sides.
</li><li> If there are two values, the first is for top and bottom, the second is for left and right.
</li><li> If there are three values, the first is for top, the second is for left and right, the third is for bottom.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>padding: 10px;</code>
</li><li> <code>padding: 0px 4px 0px 4px;</code>
</li><li> <code>padding: 0px auto 0px auto;</code>
</li></ul>
</li></ul>
<p><b>border-top-width : thin | medium | thick | <i>length</i>;</b>
<b>border-right-width : thin | medium | thick | <i>length</i>;</b>
<b>border-bottom-width : thin | medium | thick | <i>length</i>;</b>
<b>border-left-width : thin | medium | thick | <i>length</i>;</b>
</p>
<ul><li> <i>length</i> : Absolute value.
</li><li> <i>Examples</i>
<ul><li> <code>border-top-width: 1px;</code>
</li></ul>
</li></ul>
<p><b>border-width : thin | medium | thick | <i>length</i>;</b>
</p>
<ul><li> <i>Tips and FAQs</i>
<ul><li> If there is only one value, it applies to all sides.
</li><li> If there are two values, the first is for top and bottom, the second is for left and right.
</li><li> If there are three values, the first is for top, the second is for left and right, the third is for bottom.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>border-width: 1px;</code>
</li><li> <code>border-width: 1px 2px 1px 2px;</code>
</li></ul>
</li></ul>
<p><b>border-top-color : <i>color</i> | transparent;</b>
<b>border-right-color : <i>color</i> | transparent;</b>
<b>border-bottom-color : <i>color</i> | transparent;</b>
<b>border-left-color : <i>color</i> | transparent;</b>
</p>
<ul><li> <i>color</i> : Color name or RGB value.
</li><li> <i>Examples</i>
<ul><li> <code>border-top-color: red;</code>
</li><li> <code>border-bottom-color: #00ff00;</code>
</li></ul>
</li></ul>
<p><b>border-color : <i>border-top-color</i> <i>border-right-color</i> <i>border-bottom-color</i> <i>border-left-color</i>;</b>
</p>
<ul><li> <i>Tips and FAQs</i>
<ul><li> If there is only one value, it applies to all sides.
</li><li> If there are two values, the first is for top and bottom, the second is for left and right.
</li><li> If there are three values, the first is for top, the second is for left and right, the third is for bottom.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>border-color: red;</code>
</li><li> <code>border-color: #336699;</code>
</li><li> <code>border-color: green white red #0000ff;</code>
</li></ul>
</li></ul>
<p><b>border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b>
<b>border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b>
<b>border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b>
<b>border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b>
</p>
<ul><li> <i>Examples</i>
<ul><li> <code>border-top-style: red;</code>
</li><li> <code>border-bottom-style: #00ff00;</code>
</li></ul>
</li></ul>
<p><b>border-style : <i>border-top-style</i> <i>border-right-style</i> <i>border-bottom-style</i> <i>border-left-style</i>;</b>
</p>
<ul><li> <i>Tips and FAQs</i>
<ul><li> If there is only one value, it applies to all sides.
</li><li> If there are two values, the first is for top and bottom, the second is for left and right.
</li><li> If there are three values, the first is for top, the second is for left and right, the third is for bottom.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>border-style: solid;</code>
</li><li> <code>border-style: solid dotted;</code>
</li></ul>
</li></ul>
<p><b>border-top : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b>
<b>border-right : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b>
<b>border-bottom : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b>
<b>border-left : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b>
<b>border : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b>
</p>
<ul><li> <i>border-width</i> : Single width value, see above.
</li><li> <i>border-style</i> : Single style value, see above.
</li><li> <i>border-color</i> : Single color value, see above.
</li><li> <i>Examples</i>
<ul><li> <code>border-top: 1px solid black;</code>
</li><li> <code>border: 3px double #33ff33;</code>
</li></ul>
</li></ul>
<h4 name="Colors_and_Backgrounds"> Colors and Backgrounds </h4>
<p><b>color : <i>color</i>;</b>
</p>
<ul><li> <i>color</i> : color-name | color-value
<ul><li> color-name : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.
</li><li> color-value : rgb values in one of this formats, #336699, #369, rgb(51,102,153), rgb(30%,60%,100%).
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>color: #ff0000;</code>
</li><li> <code>color: #fff;</code>
</li><li> <code>color: #ff0000;</code>
</li><li> <code>color: rgb(0,255,0);</code>
</li></ul>
</li></ul>
<p><b>background-color : <i>color</i> | <i>transparent</i>;</b>
</p>
<ul><li> <i>color</i> : see above.
</li><li> <i>Examples</i>
<ul><li> <code>background-color: #ff0000;</code>
</li><li> <code>background-color: transparent;</code>
</li></ul>
</li></ul>
<p><b>background-image : <i>uri</i> | none;</b>
</p>
<ul><li> <i>uri</i> : a valid Uniform Resource Identifier, double quoted or not.
</li><li> <i>Examples</i>
<ul><li> <code>background-image: url(./img/metal.png);</code>
</li><li> <code>background-image: url("wood.png");</code>
</li><li> <code>background-image: none;</code>
</li></ul>
</li></ul>
<p><b>background-repeat : <i>repeat</i> | <i>repeat-x</i> | <i>repeat-y</i> | <i>no-repeat</i>;</b>
</p>
<ul><li> <i>repeat</i> : background image is tiled in both X and Y direction.
</li><li> <i>repeat-x</i> : background image is tiled only in X direction.
</li><li> <i>repeat-y</i> : background image is tiled only in Y direction.
</li><li> <i>no-repeat</i> : background image is not tiled.
</li><li> <i>Examples</i>
<ul><li> <code>background-repeat: no-repeat;</code>
</li><li> <code>background-repeat: repeat-y;</code>
</li></ul>
</li></ul>
<p><b>background-attachment : <i>scroll</i> | <i>fixed</i>;</b>
</p>
<ul><li> <i>scroll</i> : background image scrolls along with the containing block.
</li><li> <i>fixed</i> : background is fixed with respect to viewport.
</li><li> <i>Examples</i>
<ul><li> <code>background-attachment: fixed;</code>
</li><li> <code>background-attachment: scroll;</code>
</li></ul>
</li></ul>
<p><b>background-position : {{mediawiki.external('&lt;i&gt;percentage&lt;/i&gt; | &lt;i&gt;length&lt;/i&gt; | &lt;i&gt;left&lt;/i&gt; | &lt;i&gt;center&lt;/i&gt; | &lt;i&gt;right&lt;/i&gt;')}} {{mediawiki.external('&lt;i&gt;percentage&lt;/i&gt; | &lt;i&gt;length&lt;/i&gt; | &lt;i&gt;top&lt;/i&gt; | &lt;i&gt;center&lt;/i&gt; | &lt;i&gt;bottom&lt;/i&gt;')}}  ;</b>
</p>
<ul><li> <i>percentage</i> : position in percentage from left/top border.
</li><li> <i>length</i> : absolute position from left/top border.
</li><li> <i>Tips and FAQs</i>
<ul><li> When two <i>length</i> values are specified, the first is for horizontal position.
</li><li> <i>right bottom</i> is equivalent to <i>100% 100%</i>.
</li><li> If background-attachment is <i>scroll</i>, position is relative to padding border, else if it is <i>fixed</i>, position is relative to viewport.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>background-position: right top;</code>
</li><li> <code>background-position: 100% 100%;</code>
</li></ul>
</li></ul>
<p><b>background : <i>background-color</i> <i>background-image</i> <i>background-repeat</i> <i>background-attachment</i> <i>background-position</i>;</b>
</p>
<ul><li> <i>Examples</i>
<ul><li> <code>background: red;</code>
</li><li> <code>background: #ffffff url("mybkg.png") repeat-y fixed 50%;</code>
</li><li> <code>background: #000000 url("flag.png") no-repeat right top;</code>
</li></ul>
</li></ul>
<h4 name="Font"> Font </h4>
<p><b>font-family: <i>family-name</i> | <i>generic-family</i>, <i>family-name</i> | <i>generic-family</i>, ... ;</b>
</p>
<ul><li> <i>family-name</i> : 'Gill','Helvetica','Verdana',...
</li><li> <i>generic-family</i> : serif,sans-serif,cursive,fantasy,monospace
</li><li> <i>Tips and Common errors</i>
<ul><li> The style sheet designer should provide a list of family-names with at least one commonly available family and eventually at least one generic-family.
</li><li> Family-names with withespaces and/or special chars should be placed inside quotes.
</li><li> Generic-family are keywords and must not be quoted
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>font-family: Gill, Helvetica, sans-serif;</code>
</li><li> <code>font-family: 'Comic Sans MS', fantasy;</code>
</li></ul>
</li></ul>
<p><b>font-style: <i>normal</i> | <i>italic</i> | <i>oblique</i>; </b>
</p>
<ul><li> <i>Examples</i>
<ul><li> <code>font-style: italic;</code>
</li></ul>
</li></ul>
<p><b>font-variant: <i>normal</i> | <i>small-caps</i>; </b>
</p>
<ul><li> <i>Examples</i>
<ul><li> <code>font-variant: small-caps;</code>
</li></ul>
</li></ul>
<p><b>font-weight: <i>normal</i> | <i>bold</i> | <i>bolder</i> | <i>lighter</i> | <i>100</i> | ... | <i>900</i>; </b>
</p>
<ul><li> <i>Tips and Common errors</i>
<ul><li> Numerical values are alternative to previous keywords, 400 is equivalent to normal and 700 is equivalent to bold.
</li><li> Bolder and lighter are relative to the inherited value.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>font-weight: bold;</code>
</li></ul>
</li></ul>
<p><b>font-size: <i>absolute-size</i> | <i>relative-size</i> | <i>length</i> | <i>percentage</i>; </b>
</p>
<ul><li> <i>absolute-size</i> : <i>xx-small</i> | <i>x-small</i> | <i>small</i> | <i>medium</i> | <i>large</i> | <i>x-large</i> | <i>xx-large</i>
</li><li> <i>relative-size</i> : <i>larger</i> | <i>smaller</i>
</li><li> <i>length</i>
<ul><li> Relative to medium : <i>10px</i>, <i>0.5em</i>, <i>1ex</i>
</li><li> Absolute physical: <i>0.5in</i>, <i>1cm</i>, <i>8mm</i>, <i>12pt</i>, <i>1pc</i>
</li></ul>
</li><li> <i>percentage</i> : <i>40%</i>
</li><li> <i>Tips and Common errors</i>
<ul><li> For screen output, a Relative Length value (e.g. 12px) should be used, while for printed medium an Absolute Length value (e.g. 12pt) is better.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>font-size: 1.5em;</code>
</li><li> <code>font-size: 150%;</code>
</li><li> <code>font-size: 16px;</code>
</li></ul>
</li></ul>
<p><b>font: {{mediawiki.external('&lt;i&gt;font-style&lt;/i&gt; &lt;i&gt;font-variant&lt;/i&gt; &lt;i&gt;font-weight&lt;/i&gt;')}} <i>font-size</i> {{mediawiki.external('&lt;i&gt;/line-height&lt;/i&gt;')}} <i>font-family</i>;</b>
</p>
<ul><li> <i>font-style</i>,<i>font-variant</i>,<i>font-weight</i>,<i>font-size</i>,<i>font-family</i> : see above.
</li><li> <i>line-height</i> : same numeric format of <i>font-size</i>.
</li><li> <i>Tips and Common errors</i>
<ul><li> If you set and individual font property (<code>font-weight: bold;</code>) and then you set other properties with this complete format (<code>font: italic 12px Verdana;</code>), remember that the previous style is overridden by the last. You have two options: set individual property after complete format style, or use complete format only.
</li></ul>
</li><li> <i>Examples</i>
<ul><li> <code>font: bold italic 12px Verdana;</code>
</li><li> <code>font: 12px/14px sans-serif;</code>
</li><li> <code>font: 80% sans-serif;</code>
</li><li> <code>font: bold large Palatino, serif;</code>
</li></ul>
</li></ul>
Revert to this revision