All in a page

  • Revision slug: CSS-2_Quick_Reference/All_in_a_page
  • Revision title: All in a page
  • Revision id: 177989
  • Created:
  • Creator: Fredchat
  • Is current revision? No
  • Comment adding fr

Revision Content

This document is a quick reference to the CSS-2 specification, both for the newbie and the expert. Style properties have been represented with a simplified grammar.

Box model

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

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

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;
border-width : thin | medium | thick | length;

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

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;
border-style : border-top-style border-right-style border-bottom-style border-left-style;

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;

Visual formatting model

display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;

position : static | relative | absolute | fixed;

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

float : left | right | none;
clear : none | left | right | both;

z-index : auto | integer;

direction : ltr | rtl;
unicode-bidi : normal | embed | bidi-override;

Visual formatting details

width : length | percentage | auto; min-width : length | percentage; max-width : length | percentage | none;

height : length | percentage | auto; min-height : length | percentage; max-height : length | percentage | none;

line-height : normal | number | length | percentage;

vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length;

Visual effects

overflow : visible | hidden | scroll | auto;

clip : rect(top,right,bottom,left) | auto;

visibility : visible | hidden | collapse;

Lists

list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;
list-style-image : uri | none;
list-style-position : inside | outside;
list-style : list-style-type list-style-position list-style-image;

Color and Background

color : color;

background-color : color | transparent;
background-image : uri | none;
background-repeat : repeat | repeat-x | repeat-y | no-repeat;
background-attachment : scroll | fixed;
background-position : {{mediawiki.external('<i>percentage</i> | <i>length</i> | left | center | right')}} {{mediawiki.external('<i>percentage</i> | <i>length</i> | top | center | bottom')}}  ;
background : background-color background-image background-repeat background-attachment background-position;

Font

font-family: family-name | generic-family, family-name | generic-family, ... ;
font-style: normal | italic | oblique;
font-variant: normal | small-caps;
font-weight: normal | bold | bolder | lighter | 100 | ... | 900;
font-size: absolute-size | relative-size | length | percentage;
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;

Text

text-indent : length | percentage;
text-align : left | right | center | justify ;
text-decoration : none | {{mediawiki.external(' underline overline line-through blink ')}};
text-transform : capitalize | uppercase | lowercase | none;

letter-spacing : normal | length;
word-spacing : normal | length;
white-space : normal | pre | nowrap | pre-wrap | pre-line;

Tables

caption-side : top | bottom;

table-layout : auto | fixed;

vertical-align : baseline | top | bottom | middle;

border-collapse : collapse | separate;
border-spacing : length {{mediawiki.external('<i>length</i>')}};

empty-cells : show | hide;

User interface

cursor : {{mediawiki.external('<i>uri</i>')}} {{mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ')}}, ...;

outline-color : color | invert;
outline-style : border-style;
outline-width : border-width;
outline : outline-color outline-style outline-width;

Units

Relative Length Units : em, ex, px

  • em : 1 em is equivalent to the font-size
  • ex : 1 ex is equivalent to the x-height of the font
  • px : Pixel

Absolute Length Units : in, cm, mm, pt, pc

  • in : Inch
  • cm : Centimeter
  • mm : Millimeter
  • pt : Point
  • pc : Pica

Color Units : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)

  • #306090 : Red is 30 hex, green is 60 hex, blue is 90 hex.
  • #fa5 : Red is FF hex, green is AA hex, blue is 55 hex.
  • rgb(127,255,0) : Red is 127, green is 255, blue is 0.
  • rgb(40%,50%,60%) : Red is 40%, green is 50%, blue is 60%.

Selectors

Type selector
h1 { text-decoration: underline; }

Class selector
.myclass { text-decoration: underline; }

Id selector
#myid { text-decoration: underline; }

Descendant selector
#mainpage h1 { text-decoration: underline; }

Link pseudo-class selector
a:link { color: blue; }
a:visited { color: purple; }

Dynamic pseudo-class selector
a:hover { text-decoration: underline; }
a:active { color: #666666; }
a:focus { outline: 1px dashed red; }

Typographic pseudo-element selector
p:first-line { font-weight: bold; }
p:first-letter { font-size: 2em; }

Content pseudo-element selector
p:before { content: "["; }
p:after { content: "]"; }

Child selector
#title > p { font-weight: bold; }

First-child pseudo-class selector
p:first-child { margin-top: 0; }

Adjacent sibling selector
h1 + p { font-style: italic; }

Attribute selector
option{{mediawiki.external('selected')}} { color: #ff0000; }
input{{mediawiki.external('type=\"password\"')}} { color: #cccccc; }
a{{mediawiki.external('rel~=\"next\"')}} { background: #ffffff; }
*{{mediawiki.external('lang|=\"en\"')}} { color: red; }

{{ wiki.languages( { "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un" } ) }}

Revision Source

<p>
</p><p>This document is a quick reference to the CSS-2 specification, both for the newbie and the expert. Style properties have been represented with a simplified grammar.
</p>
<h3 name="Box_model"> Box model </h3>
<p><small>
<b>margin-top : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin-right : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin-bottom : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin-left : <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br>
<b>margin : <i>margin-top</i> <i>margin-right</i> <i>margin-bottom</i> <i>margin-left</i>;</b><br>
</small></p><p><b>padding-top : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding-right : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding-bottom : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding-left : <i>length</i> | <i>percentage</i>;</b><br>
<b>padding : <i>padding-top</i> <i>padding-right</i> <i>padding-bottom</i> <i>padding-left</i>;</b><br>
</p><p><b>border-top-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-right-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-bottom-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-left-width : thin | medium | thick | <i>length</i>;</b><br>
<b>border-width : thin | medium | thick | <i>length</i>;</b><br>
</p><p><b>border-top-color : <i>color</i> | transparent;</b><br>
<b>border-right-color : <i>color</i> | transparent;</b><br>
<b>border-bottom-color : <i>color</i> | transparent;</b><br>
<b>border-left-color : <i>color</i> | transparent;</b><br>
<b>border-color : <i>border-top-color</i> <i>border-right-color</i> <i>border-bottom-color</i> <i>border-left-color</i>;</b><br>
</p><p><b>border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br>
<b>border-style : <i>border-top-style</i> <i>border-right-style</i> <i>border-bottom-style</i> <i>border-left-style</i>;</b><br>
</p><p><b>border-top : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border-right : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border-bottom : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border-left : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>
<b>border : <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br>

</p>
<h3 name="Visual_formatting_model"> Visual formatting model </h3>
<p><small>
<b>display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;</b><br>
</small></p><p><b>position : static | relative | absolute | fixed;</b><br>
</p><p><b>top : <i>length</i> | <i>percentage</i> | auto;</b>
<b>right : <i>length</i> | <i>percentage</i> | auto;</b>
<b>bottom : <i>length</i> | <i>percentage</i> | auto;</b>
<b>left : <i>length</i> | <i>percentage</i> | auto;</b>
</p><p><b>float : left | right | none;</b><br>
<b>clear : none | left | right | both;</b><br>
</p><p><b>z-index : auto | <i>integer</i>;</b><br>
</p><p><b>direction : ltr | rtl;</b><br>
<b>unicode-bidi : normal | embed | bidi-override;</b><br>

</p>
<h3 name="Visual_formatting_details"> Visual formatting details </h3>
<p><small>
<b>width : <i>length</i> | <i>percentage</i> | auto;</b>
<b>min-width : <i>length</i> | <i>percentage</i>;</b>
<b>max-width : <i>length</i> | <i>percentage</i> | none;</b>
</small></p><p><b>height : <i>length</i> | <i>percentage</i> | auto;</b>
<b>min-height : <i>length</i> | <i>percentage</i>;</b>
<b>max-height : <i>length</i> | <i>percentage</i> | none;</b>
</p><p><b>line-height : normal | <i>number</i> | <i>length</i> | <i>percentage</i>;</b>
</p><p><b>vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <i>percentage</i> | <i>length</i>;</b><br>

</p>
<h3 name="Visual_effects"> Visual effects </h3>
<p><small>
<b>overflow : visible | hidden | scroll | auto;</b><br>
</small></p><p><b>clip : <i>rect(top,right,bottom,left)</i> | auto;</b><br>
</p><p><b>visibility : visible | hidden | collapse;</b><br>

</p>
<h3 name="Lists"> Lists </h3>
<p><small>
<b>list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;</b><br>
<b>list-style-image : <i>uri</i> | none;</b><br>
<b>list-style-position : inside | outside;</b><br>
<b>list-style : <i>list-style-type</i> <i>list-style-position</i> <i>list-style-image</i>;</b>
</small>
</p>
<h3 name="Color_and_Background"> Color and Background </h3>
<p><small>
<b>color : <i>color</i>;</b><br>
</small></p><p><b>background-color : <i>color</i> | transparent;</b><br>
<b>background-image : <i>uri</i> | none;</b><br>
<b>background-repeat : repeat | repeat-x | repeat-y | no-repeat;</b><br>
<b>background-attachment : scroll | fixed;</b><br>
<b>background-position : {{mediawiki.external('&lt;i&gt;percentage&lt;/i&gt; | &lt;i&gt;length&lt;/i&gt; | left | center | right')}} {{mediawiki.external('&lt;i&gt;percentage&lt;/i&gt; | &lt;i&gt;length&lt;/i&gt; | top | center | bottom')}}  ;</b><br>
<b>background : <i>background-color</i> <i>background-image</i> <i>background-repeat</i> <i>background-attachment</i> <i>background-position</i>;</b><br>

</p>
<h3 name="Font"> Font </h3>
<p><small>
<b>font-family: <i>family-name</i> | <i>generic-family</i>, <i>family-name</i> | <i>generic-family</i>, ... ;</b><br>
<b>font-style: normal | italic | oblique; </b><br>
<b>font-variant: normal | small-caps; </b><br>
<b>font-weight: normal | bold | bolder | lighter | 100 | ... | 900;</b><br>
<b>font-size: <i>absolute-size</i> | <i>relative-size</i> | <i>length</i> | <i>percentage</i>; </b><br>
<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>
</small>
</p>
<h3 name="Text"> Text </h3>
<p><small>
<b>text-indent : <i>length</i> | <i>percentage</i>;<br></b>
<b>text-align : left | right | center | justify ;<br></b>
<b>text-decoration : none | {{mediawiki.external(' underline overline line-through blink ')}};<br></b>
<b>text-transform : capitalize | uppercase | lowercase | none;<br></b>
<br>
<b>letter-spacing : normal | <i>length</i>;<br></b>
<b>word-spacing : normal | <i>length</i>;<br></b>
<b>white-space : normal | pre | nowrap | pre-wrap | pre-line;<br></b>
</small></p><p>
</p>
<h3 name="Tables"> Tables </h3>
<p><small>
<b>caption-side : top | bottom;</b><br>
</small></p><p><b>table-layout : auto | fixed;</b><br>
</p><p><b>vertical-align : baseline | top | bottom | middle;</b><br>
</p><p><b>border-collapse : collapse | separate;</b><br>
<b>border-spacing : <i>length</i> {{mediawiki.external('&lt;i&gt;length&lt;/i&gt;')}};</b><br>
</p><p><b>empty-cells : show | hide;</b><br>

</p>
<h3 name="User_interface"> User interface </h3>
<p><small>
<b>cursor : {{mediawiki.external('&lt;i&gt;uri&lt;/i&gt;')}} {{mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ')}}, ...;</b><br>
</small></p><p><b>outline-color : <i>color</i> | invert;</b><br>
<b>outline-style : <i>border-style</i>;</b><br>
<b>outline-width : <i>border-width</i>;</b><br>
<b>outline : <i>outline-color</i> <i>outline-style</i> <i>outline-width</i>;</b><br>

</p>
<h3 name="Units"> Units </h3>
<p><small>
<b>Relative Length Units : em, ex, px</b>
</small></p>
<ul><li> em : 1 em is equivalent to the font-size
</li><li> ex : 1 ex is equivalent to the x-height of the font
</li><li> px : Pixel
</li></ul>
<p><b>Absolute Length Units : in, cm, mm, pt, pc</b>
</p>
<ul><li> in : Inch
</li><li> cm : Centimeter
</li><li> mm : Millimeter
</li><li> pt : Point
</li><li> pc : Pica
</li></ul>
<p><b>Color Units : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)</b>
</p>
<ul><li> #306090 : Red is 30 hex, green is 60 hex, blue is 90 hex.
</li><li> #fa5 : Red is FF hex, green is AA hex, blue is 55 hex.
</li><li> rgb(127,255,0) : Red is 127, green is 255, blue is 0.
</li><li> rgb(40%,50%,60%) : Red is 40%, green is 50%, blue is 60%.
</li></ul>
<p>
</p>
<h3 name="Selectors"> Selectors </h3>
<p><small>
<b>Type selector</b><br>
<code>h1 { text-decoration: underline; }</code><br>
</small></p><p><b>Class selector</b><br>
<code>.myclass { text-decoration: underline; }</code><br>
</p><p><b>Id selector</b><br>
<code>#myid { text-decoration: underline; }</code><br>
</p><p><b>Descendant selector</b><br>
<code>#mainpage h1 { text-decoration: underline; }</code><br>
</p><p><b>Link pseudo-class selector</b><br>
<code>a:link { color: blue; }</code><br>
<code>a:visited { color: purple; }</code><br>
</p><p><b>Dynamic pseudo-class selector</b><br>
<code>a:hover { text-decoration: underline; }</code><br>
<code>a:active { color: #666666; }</code><br>
<code>a:focus { outline: 1px dashed red; }</code><br>
</p><p><b>Typographic pseudo-element selector</b><br>
<code>p:first-line { font-weight: bold; }</code><br>
<code>p:first-letter { font-size: 2em; }</code><br>
</p><p><b>Content pseudo-element selector</b><br>
<code>p:before { content: "["; }</code><br>
<code>p:after { content: "]"; }</code><br>
</p><p><b>Child selector</b><br>
<code>#title &gt; p { font-weight: bold; }</code><br>
</p><p><b>First-child pseudo-class selector</b><br>
<code>p:first-child { margin-top: 0; }</code><br>
</p><p><b>Adjacent sibling selector</b><br>
<code>h1 + p { font-style: italic; }</code><br>
</p><p><b>Attribute selector</b><br>
<code>option{{mediawiki.external('selected')}} { color: #ff0000; }</code><br>
<code>input{{mediawiki.external('type=\"password\"')}} { color: #cccccc; }</code><br>
<code>a{{mediawiki.external('rel~=\"next\"')}} { background: #ffffff; }</code><br>
<code>*{{mediawiki.external('lang|=\"en\"')}} { color: red; }</code><br>

</p>{{ wiki.languages( { "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un" } ) }}
Revert to this revision