CSS reference

  • Revision slug: CSS/CSS_Reference
  • Revision title: CSS Reference
  • Revision id: 11891
  • Created:
  • Creator: TigerSoldier
  • Is current revision? No
  • Comment

Revision Content

This is a work in progress. If you would like to help write up any of the pages listed below, you are more than welcome to help.

If you are going to add a page, please copy/paste the content from CSS Reference:Property Template and modify as required.

The basic template for example pages can be found here: TEMPLATE.html. Just copy the source from that file, modify as required, then email the example pages and any related files to deb@mozilla.com for uploading.

If you have any questions or suggestions, please feel free to discuss them on the Talk:CSS Reference page.

The primary references I'm using at the moment are:

The current goal is for this document is to provide comprehensive, detailed, and accurate reference information for CSS up to at least Level 2, Revision 1.

Please do not copy or plagarize copyrighted materials without written permission from the author. Please write original, clear content for this reference. Thanks.

-- dria 11:39, 17 October 2005 (PDT)

Note: please use the Template:cssxref to link to properties from this reference, for example: {{cssxref|color}}. Doing so results in more concise wiki markup and consistent style across the reference. --Nickolay 16:33, 23 September 2006 (PDT)

Properties

  • {{template.Cssxref("azimuth")}}
  • {{template.Cssxref("background")}}
  • {{template.Cssxref("background-attachment")}}
  • {{template.Cssxref("background-color")}}
  • {{template.Cssxref("background-image")}}
  • {{template.Cssxref("background-position")}}
  • {{template.Cssxref("background-repeat")}}
  • {{template.Cssxref("border")}}
  • {{template.Cssxref("border-bottom")}}
  • {{template.Cssxref("border-bottom-color")}}
  • {{template.Cssxref("border-bottom-style")}}
  • {{template.Cssxref("border-bottom-width")}}
  • {{template.Cssxref("border-collapse")}}
  • {{template.Cssxref("border-color")}}
  • {{template.Cssxref("border-left")}}
  • {{template.Cssxref("border-left-color")}}
  • {{template.Cssxref("border-left-style")}}
  • {{template.Cssxref("border-left-width")}}
  • {{template.Cssxref("border-right")}}
  • {{template.Cssxref("border-right-color")}}
  • {{template.Cssxref("border-right-style")}}
  • {{template.Cssxref("border-right-width")}}
  • {{template.Cssxref("border-spacing")}}
  • {{template.Cssxref("border-style")}}
  • {{template.Cssxref("border-top")}}
  • {{template.Cssxref("border-top-color")}}
  • {{template.Cssxref("border-top-style")}}
  • {{template.Cssxref("border-top-width")}}
  • {{template.Cssxref("border-width")}}
  • {{template.Cssxref("bottom")}}
  • {{template.Cssxref("caption-side")}}
  • {{template.Cssxref("clear")}}
  • {{template.Cssxref("clip")}}
  • {{template.Cssxref("color")}}
  • {{template.Cssxref("content")}}
  • {{template.Cssxref("counter-increment")}}
  • {{template.Cssxref("counter-reset")}}
  • {{template.Cssxref("cue")}}
  • {{template.Cssxref("cue-after")}}
  • {{template.Cssxref("cue-before")}}
  • {{template.Cssxref("cursor")}}
  • {{template.Cssxref("direction")}}
  • {{template.Cssxref("display")}}
  • {{template.Cssxref("elevation")}}
  • {{template.Cssxref("empty-cells")}}
  • {{template.Cssxref("float")}}
  • {{template.Cssxref("font")}}
  • {{template.Cssxref("font-family")}}
  • {{template.Cssxref("font-size")}}
  • {{template.Cssxref("font-size-adjust")}}
  • {{template.Cssxref("font-stretch")}}
  • {{template.Cssxref("font-style")}}
  • {{template.Cssxref("font-variant")}}
  • {{template.Cssxref("font-weight")}}
  • {{template.Cssxref("height")}}
  • {{template.Cssxref("ime-mode")}}
  • {{template.Cssxref("left")}}
  • {{template.Cssxref("letter-spacing")}}
  • {{template.Cssxref("line-height")}}
  • {{template.Cssxref("list-style")}}
  • {{template.Cssxref("list-style-image")}}
  • {{template.Cssxref("list-style-position")}}
  • {{template.Cssxref("list-style-type")}}
  • {{template.Cssxref("margin")}}
  • {{template.Cssxref("margin-bottom")}}
  • {{template.Cssxref("margin-left")}}
  • {{template.Cssxref("margin-right")}}
  • {{template.Cssxref("margin-top")}}
  • {{template.Cssxref("marker-offset")}}
  • {{template.Cssxref("marks")}}
  • {{template.Cssxref("max-height")}}
  • {{template.Cssxref("max-width")}}
  • {{template.Cssxref("min-height")}}
  • {{template.Cssxref("min-width")}}
  • {{template.Cssxref("opacity")}}
  • {{template.Cssxref("orphans")}}
  • {{template.Cssxref("outline")}}
  • {{template.Cssxref("outline-color")}}
  • {{template.Cssxref("outline-offset")}}
  • {{template.Cssxref("outline-style")}}
  • {{template.Cssxref("outline-width")}}
  • {{template.Cssxref("overflow")}}
  • {{template.Cssxref("padding")}}
  • {{template.Cssxref("padding-bottom")}}
  • {{template.Cssxref("padding-left")}}
  • {{template.Cssxref("padding-right")}}
  • {{template.Cssxref("padding-top")}}
  • {{template.Cssxref("page")}}
  • {{template.Cssxref("page-break-after")}}
  • {{template.Cssxref("page-break-before")}}
  • {{template.Cssxref("page-break-inside")}}
  • {{template.Cssxref("pause")}}
  • {{template.Cssxref("pause-after")}}
  • {{template.Cssxref("pause-before")}}
  • {{template.Cssxref("pitch")}}
  • {{template.Cssxref("pitch-range")}}
  • {{template.Cssxref("play-during")}}
  • {{template.Cssxref("position")}}
  • {{template.Cssxref("quotes")}}
  • {{template.Cssxref("richness")}}
  • {{template.Cssxref("right")}}
  • {{template.Cssxref("size")}}
  • {{template.Cssxref("speak")}}
  • {{template.Cssxref("speak-header")}}
  • {{template.Cssxref("speak-numeral")}}
  • {{template.Cssxref("speak-punctuation")}}
  • {{template.Cssxref("speech-rate")}}
  • {{template.Cssxref("stress")}}
  • {{template.Cssxref("table-layout")}}
  • {{template.Cssxref("text-align")}}
  • {{template.Cssxref("text-decoration")}}
  • {{template.Cssxref("text-indent")}}
  • {{template.Cssxref("text-rendering")}}
  • {{template.Cssxref("text-shadow")}}
  • {{template.Cssxref("text-transform")}}
  • {{template.Cssxref("top")}}
  • {{template.Cssxref("unicode-bidi")}}
  • {{template.Cssxref("vertical-align")}}
  • {{template.Cssxref("visibility")}}
  • {{template.Cssxref("voice-family")}}
  • {{template.Cssxref("volume")}}
  • {{template.Cssxref("white-space")}}
  • {{template.Cssxref("widows")}}
  • {{template.Cssxref("width")}}
  • {{template.Cssxref("word-spacing")}}
  • {{template.Cssxref("z-index")}}

Selectors

Simple selectors

  • {{template.Cssxref("Type selectors")}}
  • {{template.Cssxref("Class selectors")}}
  • {{template.Cssxref("ID selectors")}}
  • {{template.Cssxref("Universal selectors")}}
  • {{template.Cssxref("Attribute selectors")}}
  • {{template.Cssxref(":not")}}

Combinators

  • {{template.Cssxref("Adjacent sibling selectors")}}
  • {{template.Cssxref("Child selectors")}}
  • {{template.Cssxref("Descendant selectors")}}

{{template.Cssxref("Pseudo-elements")}}

  • {{template.Cssxref(":after")}}
  • {{template.Cssxref(":before")}}
  • {{template.Cssxref(":first-letter")}}
  • {{template.Cssxref(":first-line")}}

{{template.Cssxref("Pseudo-classes")}}

  • Link pseudo-classes
    • {{template.Cssxref(":link")}}
    • {{template.Cssxref(":visited")}}
  • Dynamic pseudo-classes
    • {{template.Cssxref(":active")}}
    • {{template.Cssxref(":focus")}}
    • {{template.Cssxref(":hover")}}
  • Page pseudo-classes
    • {{template.Cssxref(":first")}}
    • {{template.Cssxref(":left")}}
    • {{template.Cssxref(":right")}}
  • Structural pseudo-classes
    • {{template.Cssxref(":empty")}}
    • {{template.Cssxref(":first-child")}}
    • {{template.Cssxref(":first-node")}}
    • {{template.Cssxref(":last-child")}}
    • {{template.Cssxref(":last-node")}}
    • {{template.Cssxref(":root")}}
  • User interface pseudo-classes
    • {{template.Cssxref(":default")}} {{template.Fx_minversion_inline(3)}}
  • Language pseudo-classes
    • {{template.Cssxref(":lang")}}


Other

@-rules and Comments

  • {{template.Cssxref("@font-face")}}
  • {{template.Cssxref("@import")}}
  • {{template.Cssxref("@media")}}
  • {{template.Cssxref("Comments")}}

Values

  • {{template.Cssxref("inherit")}}
  • {{template.Cssxref("initial")}}
  • {{template.Xref_csslength()}}
  • {{template.Xref_csspercentage()}}
  • {{template.Xref_cssuri()}}
  • {{template.Cssxref("auto")}}
  • {{template.Xref_cssshape()}}
  • {{template.Xref_cssnumber()}}
  • {{template.Xref_cssinteger()}}

Concepts

  • {{template.Cssxref("initial value")}}
  • {{template.Cssxref("inheritance")}}
  • {{template.Cssxref("specified value")}}
  • {{template.Cssxref("computed value")}}
  • {{template.Cssxref("used value")}}
  • {{template.Cssxref("actual value")}}
  • {{template.Cssxref("box model")}}


Mozilla Extensions


{{ wiki.languages( { "de": "de/CSS_Referenz", "es": "es/Gu\u00eda_de_referencia_de_CSS", "fr": "fr/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}

Revision Source

<p>
</p>
<div class="note">
<p>This is a work in progress.  If you would like to help write up any of the pages listed below, you are more than welcome to help.
</p><p>If you are going to add a page, please copy/paste the content from <a href="en/CSS_Reference/Property_Template">CSS Reference:Property Template</a> and modify as required.
</p><p>The basic template for example pages can be found here: <a class="external" href="http://developer.mozilla.org/samples/cssref/TEMPLATE.html">TEMPLATE.html</a>.  Just copy the source from that file, modify as required, then email the example pages and any related files to <a class="external" href="mailto:deb@mozilla.com">deb@mozilla.com</a> for uploading.
</p><p>If you have any questions or suggestions, please feel free to discuss them on the <a href="Talk:en/CSS_Reference">Talk:CSS Reference</a> page.
</p><p>The primary references I'm using at the moment are:
</p>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/">W3C Cascading Style Sheets, level 2 revision 1</a> (main)
</li><li> <a class="external" href="http://www.w3.org/TR/CSS1">W3C Cascading Style Sheets, level 1</a> (secondary)
</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work">W3C Cascading Style Sheets (notes on CSS3)</a> (where useful/interesting)
</li></ul>
<p>The current goal is for this document is to provide comprehensive, detailed, and accurate reference information for CSS up to at least Level 2, Revision 1.
</p><p><i>Please do not copy or plagarize copyrighted materials without written permission from the author.  Please write original, clear content for this reference.  Thanks.</i>
</p><p>-- <a href="User:Dria">dria</a> 11:39, 17 October 2005 (PDT)
</p><p>Note: please use the <a href="Template:Cssxref">Template:cssxref</a> to link to properties from this reference, for example: <span class="plain">{{cssxref|color}}</span>. Doing so results in more concise wiki markup and consistent style across the reference. --<a href="User:Nickolay">Nickolay</a> 16:33, 23 September 2006 (PDT)
</p>
</div>
<h3 name="Properties"> Properties </h3>
<div style="-moz-column-width:200px">
<ul><li> {{template.Cssxref("azimuth")}}
</li><li> {{template.Cssxref("background")}}
</li><li> {{template.Cssxref("background-attachment")}}
</li><li> {{template.Cssxref("background-color")}}
</li><li> {{template.Cssxref("background-image")}}
</li><li> {{template.Cssxref("background-position")}}
</li><li> {{template.Cssxref("background-repeat")}}
</li><li> {{template.Cssxref("border")}}
</li><li> {{template.Cssxref("border-bottom")}}
</li><li> {{template.Cssxref("border-bottom-color")}} 
</li><li> {{template.Cssxref("border-bottom-style")}}
</li><li> {{template.Cssxref("border-bottom-width")}}
</li><li> {{template.Cssxref("border-collapse")}}
</li><li> {{template.Cssxref("border-color")}}
</li><li> {{template.Cssxref("border-left")}}
</li><li> {{template.Cssxref("border-left-color")}}
</li><li> {{template.Cssxref("border-left-style")}}
</li><li> {{template.Cssxref("border-left-width")}}
</li><li> {{template.Cssxref("border-right")}}
</li><li> {{template.Cssxref("border-right-color")}}
</li><li> {{template.Cssxref("border-right-style")}}
</li><li> {{template.Cssxref("border-right-width")}}
</li><li> {{template.Cssxref("border-spacing")}}
</li><li> {{template.Cssxref("border-style")}}
</li><li> {{template.Cssxref("border-top")}}
</li><li> {{template.Cssxref("border-top-color")}}
</li><li> {{template.Cssxref("border-top-style")}}
</li><li> {{template.Cssxref("border-top-width")}}
</li><li> {{template.Cssxref("border-width")}}
</li><li> {{template.Cssxref("bottom")}}
</li><li> {{template.Cssxref("caption-side")}}
</li><li> {{template.Cssxref("clear")}}
</li><li> {{template.Cssxref("clip")}}
</li><li> {{template.Cssxref("color")}}
</li><li> {{template.Cssxref("content")}}
</li><li> {{template.Cssxref("counter-increment")}}
</li><li> {{template.Cssxref("counter-reset")}}
</li><li> {{template.Cssxref("cue")}}
</li><li> {{template.Cssxref("cue-after")}}
</li><li> {{template.Cssxref("cue-before")}}
</li><li> {{template.Cssxref("cursor")}}
</li><li> {{template.Cssxref("direction")}}
</li><li> {{template.Cssxref("display")}}
</li><li> {{template.Cssxref("elevation")}}
</li><li> {{template.Cssxref("empty-cells")}}
</li><li> {{template.Cssxref("float")}}
</li><li> {{template.Cssxref("font")}}
</li><li> {{template.Cssxref("font-family")}}
</li><li> {{template.Cssxref("font-size")}}
</li><li> {{template.Cssxref("font-size-adjust")}}
</li><li> {{template.Cssxref("font-stretch")}}
</li><li> {{template.Cssxref("font-style")}}
</li><li> {{template.Cssxref("font-variant")}}
</li><li> {{template.Cssxref("font-weight")}}
</li><li> {{template.Cssxref("height")}}
</li><li> {{template.Cssxref("ime-mode")}}
</li><li> {{template.Cssxref("left")}}
</li><li> {{template.Cssxref("letter-spacing")}}
</li><li> {{template.Cssxref("line-height")}}
</li><li> {{template.Cssxref("list-style")}}
</li><li> {{template.Cssxref("list-style-image")}}
</li><li> {{template.Cssxref("list-style-position")}}
</li><li> {{template.Cssxref("list-style-type")}}
</li><li> {{template.Cssxref("margin")}}
</li><li> {{template.Cssxref("margin-bottom")}}
</li><li> {{template.Cssxref("margin-left")}}
</li><li> {{template.Cssxref("margin-right")}}
</li><li> {{template.Cssxref("margin-top")}}
</li><li> {{template.Cssxref("marker-offset")}}
</li><li> {{template.Cssxref("marks")}}
</li><li> {{template.Cssxref("max-height")}}
</li><li> {{template.Cssxref("max-width")}}
</li><li> {{template.Cssxref("min-height")}}
</li><li> {{template.Cssxref("min-width")}}
</li><li> {{template.Cssxref("opacity")}}
</li><li> {{template.Cssxref("orphans")}}
</li><li> {{template.Cssxref("outline")}}
</li><li> {{template.Cssxref("outline-color")}}
</li><li> {{template.Cssxref("outline-offset")}}
</li><li> {{template.Cssxref("outline-style")}}
</li><li> {{template.Cssxref("outline-width")}}
</li><li> {{template.Cssxref("overflow")}}
</li><li> {{template.Cssxref("padding")}}
</li><li> {{template.Cssxref("padding-bottom")}}
</li><li> {{template.Cssxref("padding-left")}}
</li><li> {{template.Cssxref("padding-right")}}
</li><li> {{template.Cssxref("padding-top")}}
</li><li> {{template.Cssxref("page")}}
</li><li> {{template.Cssxref("page-break-after")}}
</li><li> {{template.Cssxref("page-break-before")}}
</li><li> {{template.Cssxref("page-break-inside")}}
</li><li> {{template.Cssxref("pause")}}
</li><li> {{template.Cssxref("pause-after")}}
</li><li> {{template.Cssxref("pause-before")}}
</li><li> {{template.Cssxref("pitch")}}
</li><li> {{template.Cssxref("pitch-range")}}
</li><li> {{template.Cssxref("play-during")}}
</li><li> {{template.Cssxref("position")}}
</li><li> {{template.Cssxref("quotes")}}
</li><li> {{template.Cssxref("richness")}}
</li><li> {{template.Cssxref("right")}}
</li><li> {{template.Cssxref("size")}}
</li><li> {{template.Cssxref("speak")}}
</li><li> {{template.Cssxref("speak-header")}}
</li><li> {{template.Cssxref("speak-numeral")}}
</li><li> {{template.Cssxref("speak-punctuation")}}
</li><li> {{template.Cssxref("speech-rate")}}
</li><li> {{template.Cssxref("stress")}}
</li><li> {{template.Cssxref("table-layout")}}
</li><li> {{template.Cssxref("text-align")}}
</li><li> {{template.Cssxref("text-decoration")}}
</li><li> {{template.Cssxref("text-indent")}}
</li><li> {{template.Cssxref("text-rendering")}}
</li><li> {{template.Cssxref("text-shadow")}}
</li><li> {{template.Cssxref("text-transform")}}
</li><li> {{template.Cssxref("top")}}
</li><li> {{template.Cssxref("unicode-bidi")}}
</li><li> {{template.Cssxref("vertical-align")}}
</li><li> {{template.Cssxref("visibility")}}
</li><li> {{template.Cssxref("voice-family")}}
</li><li> {{template.Cssxref("volume")}}
</li><li> {{template.Cssxref("white-space")}}
</li><li> {{template.Cssxref("widows")}}
</li><li> {{template.Cssxref("width")}}
</li><li> {{template.Cssxref("word-spacing")}}
</li><li> {{template.Cssxref("z-index")}}
</li></ul>
</div>
<h3 name="Selectors"> Selectors </h3>
<div style="float:left;margin:0px 30px">
<h4 name="Simple_selectors"> Simple selectors </h4>
<ul><li> {{template.Cssxref("Type selectors")}}
</li><li> {{template.Cssxref("Class selectors")}}
</li><li> {{template.Cssxref("ID selectors")}}
</li><li> {{template.Cssxref("Universal selectors")}}
</li><li> {{template.Cssxref("Attribute selectors")}}
</li><li> {{template.Cssxref(":not")}}
</li></ul>
<h4 name="Combinators"> Combinators </h4>
<ul><li> {{template.Cssxref("Adjacent sibling selectors")}}
</li><li> {{template.Cssxref("Child selectors")}}
</li><li> {{template.Cssxref("Descendant selectors")}}
</li></ul>
<h4 name="CssxrefPseudo-elements"> {{template.Cssxref("Pseudo-elements")}} </h4>
<ul><li> {{template.Cssxref(":after")}}
</li><li> {{template.Cssxref(":before")}}
</li><li> {{template.Cssxref(":first-letter")}}
</li><li> {{template.Cssxref(":first-line")}}
</li></ul>
</div>
<div style="float:left;margin:0px 30px">
<h4 name="CssxrefPseudo-classes"> {{template.Cssxref("Pseudo-classes")}} </h4>
<ul><li> Link pseudo-classes
<ul><li> {{template.Cssxref(":link")}}
</li><li> {{template.Cssxref(":visited")}}
</li></ul>
</li><li> Dynamic pseudo-classes
<ul><li> {{template.Cssxref(":active")}}
</li><li> {{template.Cssxref(":focus")}}
</li><li> {{template.Cssxref(":hover")}}
</li></ul>
</li><li> Page pseudo-classes
<ul><li> {{template.Cssxref(":first")}}
</li><li> {{template.Cssxref(":left")}}
</li><li> {{template.Cssxref(":right")}}
</li></ul>
</li><li> Structural pseudo-classes
<ul><li> {{template.Cssxref(":empty")}}
</li><li> {{template.Cssxref(":first-child")}}
</li><li> {{template.Cssxref(":first-node")}}
</li><li> {{template.Cssxref(":last-child")}}
</li><li> {{template.Cssxref(":last-node")}}
</li><li> {{template.Cssxref(":root")}}
</li></ul>
</li><li> User interface pseudo-classes
<ul><li> {{template.Cssxref(":default")}} {{template.Fx_minversion_inline(3)}}
</li></ul>
</li><li> Language pseudo-classes
<ul><li> {{template.Cssxref(":lang")}}
</li></ul>
</li></ul>
</div>
<p><br style="clear:both;line-height:0px">
</p>
<h3 name="Other"> Other </h3>
<div style="float:left;margin:0px 30px">
<h4 name=".40-rules_and_Comments"> <code>@</code>-rules and Comments </h4>
<ul><li> {{template.Cssxref("@font-face")}}
</li><li> {{template.Cssxref("@import")}}
</li><li> {{template.Cssxref("@media")}}
</li><li> {{template.Cssxref("Comments")}}
</li></ul>
<h4 name="Values"> Values </h4>
<ul><li> {{template.Cssxref("inherit")}}
</li><li> {{template.Cssxref("initial")}}
</li><li> {{template.Xref_csslength()}}
</li><li> {{template.Xref_csspercentage()}}
</li><li> {{template.Xref_cssuri()}}
</li><li> {{template.Cssxref("auto")}}
</li><li> {{template.Xref_cssshape()}}
</li><li> {{template.Xref_cssnumber()}}
</li><li> {{template.Xref_cssinteger()}}
</li></ul>
</div>
<div style="float:left;margin:0px 30px">
<h4 name="Concepts"> Concepts </h4>
<ul><li> {{template.Cssxref("initial value")}}
</li><li> {{template.Cssxref("inheritance")}}
</li><li> {{template.Cssxref("specified value")}}
</li><li> {{template.Cssxref("computed value")}}
</li><li> {{template.Cssxref("used value")}}
</li><li> {{template.Cssxref("actual value")}}
</li><li> {{template.Cssxref("box model")}}
</li></ul>
</div>
<p><br style="clear:both;line-height:0px">
</p>
<h3 name="Mozilla_Extensions"> Mozilla Extensions </h3>
<ul><li> <a href="en/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>
</li></ul>
<p><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "de": "de/CSS_Referenz", "es": "es/Gu\u00eda_de_referencia_de_CSS", "fr": "fr/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}
Revert to this revision