Revision 193664 of User:Lombardp

  • Revision slug: User:Lombardp
  • Revision title: User:Lombardp
  • Revision id: 193664
  • Created:
  • Creator: Lombardp
  • Is current revision? No
  • Comment /* CSS-2 Quick Reference */

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

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

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="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>
<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