All in a page

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

Revision Content

{{ Outdated() }}

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('percentage | length | left | center | right') }} {{ mediawiki.external('percentage | length | 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('font-style font-variant font-weight') }} font-size {{ mediawiki.external('/line-height') }} 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('length') }};

empty-cells : show | hide;

User interface

cursor : {{ mediawiki.external('uri') }} {{ 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; }

 

{{ languages( { "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un", "ja": "ja/CSS-2_Quick_Reference/All_in_a_page" } ) }}

Revision Source

<p>{{ Outdated() }}</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 id="Box_model" name="Box_model">Box model</h3>
<p><small><b>margin-top&nbsp;: <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br />
  <b>margin-right&nbsp;: <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br />
  <b>margin-bottom&nbsp;: <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br />
  <b>margin-left&nbsp;: <i>length</i> | <i>percentage</i> | <i>auto</i>;</b><br />
  <b>margin&nbsp;: <i>margin-top</i> <i>margin-right</i> <i>margin-bottom</i> <i>margin-left</i>;</b></small></p>
<p><b>padding-top&nbsp;: <i>length</i> | <i>percentage</i>;</b><br />
  <b>padding-right&nbsp;: <i>length</i> | <i>percentage</i>;</b><br />
  <b>padding-bottom&nbsp;: <i>length</i> | <i>percentage</i>;</b><br />
  <b>padding-left&nbsp;: <i>length</i> | <i>percentage</i>;</b><br />
  <b>padding&nbsp;: <i>padding-top</i> <i>padding-right</i> <i>padding-bottom</i> <i>padding-left</i>;</b></p>
<p><b>border-top-width&nbsp;: thin | medium | thick | <i>length</i>;</b><br />
  <b>border-right-width&nbsp;: thin | medium | thick | <i>length</i>;</b><br />
  <b>border-bottom-width&nbsp;: thin | medium | thick | <i>length</i>;</b><br />
  <b>border-left-width&nbsp;: thin | medium | thick | <i>length</i>;</b><br />
  <b>border-width&nbsp;: thin | medium | thick | <i>length</i>;</b></p>
<p><b>border-top-color&nbsp;: <i>color</i> | transparent;</b><br />
  <b>border-right-color&nbsp;: <i>color</i> | transparent;</b><br />
  <b>border-bottom-color&nbsp;: <i>color</i> | transparent;</b><br />
  <b>border-left-color&nbsp;: <i>color</i> | transparent;</b><br />
  <b>border-color&nbsp;: <i>border-top-color</i> <i>border-right-color</i> <i>border-bottom-color</i> <i>border-left-color</i>;</b></p>
<p><b>border-top-style&nbsp;: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br />
  <b>border-right-style&nbsp;: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br />
  <b>border-bottom-style&nbsp;: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br />
  <b>border-left-style&nbsp;: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;</b><br />
  <b>border-style&nbsp;: <i>border-top-style</i> <i>border-right-style</i> <i>border-bottom-style</i> <i>border-left-style</i>;</b></p>
<p><b>border-top&nbsp;: <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br />
  <b>border-right&nbsp;: <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br />
  <b>border-bottom&nbsp;: <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br />
  <b>border-left&nbsp;: <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b><br />
  <b>border&nbsp;: <i>border-width</i> <i>border-style</i> <i>border-color</i>;</b></p>
<h3 id="Visual_formatting_model" name="Visual_formatting_model">Visual formatting model</h3>
<p><small><b>display&nbsp;: 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></small></p>
<p><b>position&nbsp;: static | relative | absolute | fixed;</b></p>
<p><b>top&nbsp;: <i>length</i> | <i>percentage</i> | auto;</b> <b>right&nbsp;: <i>length</i> | <i>percentage</i> | auto;</b> <b>bottom&nbsp;: <i>length</i> | <i>percentage</i> | auto;</b> <b>left&nbsp;: <i>length</i> | <i>percentage</i> | auto;</b></p>
<p><b>float&nbsp;: left | right | none;</b><br />
  <b>clear&nbsp;: none | left | right | both;</b></p>
<p><b>z-index&nbsp;: auto | <i>integer</i>;</b></p>
<p><b>direction&nbsp;: ltr | rtl;</b><br />
  <b>unicode-bidi&nbsp;: normal | embed | bidi-override;</b></p>
<h3 id="Visual_formatting_details" name="Visual_formatting_details">Visual formatting details</h3>
<p><small><b>width&nbsp;: <i>length</i> | <i>percentage</i> | auto;</b> <b>min-width&nbsp;: <i>length</i> | <i>percentage</i>;</b> <b>max-width&nbsp;: <i>length</i> | <i>percentage</i> | none;</b> </small></p>
<p><b>height&nbsp;: <i>length</i> | <i>percentage</i> | auto;</b> <b>min-height&nbsp;: <i>length</i> | <i>percentage</i>;</b> <b>max-height&nbsp;: <i>length</i> | <i>percentage</i> | none;</b></p>
<p><b>line-height&nbsp;: normal | <i>number</i> | <i>length</i> | <i>percentage</i>;</b></p>
<p><b>vertical-align&nbsp;: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <i>percentage</i> | <i>length</i>;</b></p>
<h3 id="Visual_effects" name="Visual_effects">Visual effects</h3>
<p><small><b>overflow&nbsp;: visible | hidden | scroll | auto;</b></small></p>
<p><b>clip&nbsp;: <i>rect(top,right,bottom,left)</i> | auto;</b></p>
<p><b>visibility&nbsp;: visible | hidden | collapse;</b></p>
<h3 id="Lists" name="Lists">Lists</h3>
<p><small><b>list-style-type&nbsp;: 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&nbsp;: <i>uri</i> | none;</b><br />
  <b>list-style-position&nbsp;: inside | outside;</b><br />
  <b>list-style&nbsp;: <i>list-style-type</i> <i>list-style-position</i> <i>list-style-image</i>;</b> </small></p>
<h3 id="Color_and_Background" name="Color_and_Background">Color and Background</h3>
<p><small><b>color&nbsp;: <i>color</i>;</b></small></p>
<p><b>background-color&nbsp;: <i>color</i> | transparent;</b><br />
  <b>background-image&nbsp;: <i>uri</i> | none;</b><br />
  <b>background-repeat&nbsp;: repeat | repeat-x | repeat-y | no-repeat;</b><br />
  <b>background-attachment&nbsp;: scroll | fixed;</b><br />
  <b>background-position&nbsp;: {{ mediawiki.external('<i>percentage</i> | <i>length</i> | left | center | right') }} {{ mediawiki.external('<i>percentage</i> | <i>length</i> | top | center | bottom') }} &nbsp;;</b><br />
  <b>background&nbsp;: <i>background-color</i> <i>background-image</i> <i>background-repeat</i> <i>background-attachment</i> <i>background-position</i>;</b></p>
<h3 id="Font" 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>, ...&nbsp;;</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('<i>font-style</i> <i>font-variant</i> <i>font-weight</i>') }} <i>font-size</i> {{ mediawiki.external('<i>/line-height</i>') }} <i>font-family</i>;</b> </small></p>
<h3 id="Text" name="Text">Text</h3>
<p><small><b>text-indent&nbsp;: <i>length</i> | <i>percentage</i>;</b><br />
  <b>text-align&nbsp;: left | right | center | justify&nbsp;;</b><br />
  <b>text-decoration&nbsp;: none | {{ mediawiki.external(' underline overline line-through blink ') }};</b><br />
  <b>text-transform&nbsp;: capitalize | uppercase | lowercase | none;</b><br />
  <br />
  <b>letter-spacing&nbsp;: normal | <i>length</i>;</b><br />
  <b>word-spacing&nbsp;: normal | <i>length</i>;</b><br />
  <b>white-space&nbsp;: normal | pre | nowrap | pre-wrap | pre-line;</b></small></p>
<p>&nbsp;</p>
<h3 id="Tables" name="Tables">Tables</h3>
<p><small><b>caption-side&nbsp;: top | bottom;</b></small></p>
<p><b>table-layout&nbsp;: auto | fixed;</b></p>
<p><b>vertical-align&nbsp;: baseline | top | bottom | middle;</b></p>
<p><b>border-collapse&nbsp;: collapse | separate;</b><br />
  <b>border-spacing&nbsp;: <i>length</i> {{ mediawiki.external('<i>length</i>') }};</b></p>
<p><b>empty-cells&nbsp;: show | hide;</b></p>
<h3 id="User_interface" name="User_interface">User interface</h3>
<p><small><b>cursor&nbsp;: {{ 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 ') }}, ...;</b></small></p>
<p><b>outline-color&nbsp;: <i>color</i> | invert;</b><br />
  <b>outline-style&nbsp;: <i>border-style</i>;</b><br />
  <b>outline-width&nbsp;: <i>border-width</i>;</b><br />
  <b>outline&nbsp;: <i>outline-color</i> <i>outline-style</i> <i>outline-width</i>;</b></p>
<h3 id="Units" name="Units">Units</h3>
<p><small><b>Relative Length Units&nbsp;: em, ex, px</b> </small></p>
<ul>
  <li>em&nbsp;: 1 em is equivalent to the font-size</li>
  <li>ex&nbsp;: 1 ex is equivalent to the x-height of the font</li>
  <li>px&nbsp;: Pixel</li>
</ul>
<p><b>Absolute Length Units&nbsp;: in, cm, mm, pt, pc</b></p>
<ul>
  <li>in&nbsp;: Inch</li>
  <li>cm&nbsp;: Centimeter</li>
  <li>mm&nbsp;: Millimeter</li>
  <li>pt&nbsp;: Point</li>
  <li>pc&nbsp;: Pica</li>
</ul>
<p><b>Color Units&nbsp;: #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)</b></p>
<ul>
  <li>#306090&nbsp;: Red is 30 hex, green is 60 hex, blue is 90 hex.</li>
  <li>#fa5&nbsp;: Red is FF hex, green is AA hex, blue is 55 hex.</li>
  <li>rgb(127,255,0)&nbsp;: Red is 127, green is 255, blue is 0.</li>
  <li>rgb(40%,50%,60%)&nbsp;: Red is 40%, green is 50%, blue is 60%.</li>
</ul>
<p>&nbsp;</p>
<h3 id="Selectors" name="Selectors">Selectors</h3>
<p><small><b>Type selector</b><br />
  <code>h1 { text-decoration: underline; }</code></small></p>
<p><b>Class selector</b><br />
  <code>.myclass { text-decoration: underline; }</code></p>
<p><b>Id selector</b><br />
  <code>#myid { text-decoration: underline; }</code></p>
<p><b>Descendant selector</b><br />
  <code>#mainpage h1 { text-decoration: underline; }</code></p>
<p><b>Link pseudo-class selector</b><br />
  <code>a:link { color: blue; }</code><br />
  <code>a:visited { color: purple; }</code></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></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></p>
<p><b>Content pseudo-element selector</b><br />
  <code>p:before { content: "["; }</code><br />
  <code>p:after { content: "]"; }</code></p>
<p><b>Child selector</b><br />
  <code>#title &gt; p { font-weight: bold; }</code></p>
<p><b>First-child pseudo-class selector</b><br />
  <code>p:first-child { margin-top: 0; }</code></p>
<p><b>Adjacent sibling selector</b><br />
  <code>h1 + p { font-style: italic; }</code></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></p>
<div class="noinclude">
  &nbsp;</div>
<p>{{ languages( { "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un", "ja": "ja/CSS-2_Quick_Reference/All_in_a_page" } ) }}</p>
Revert to this revision