Cascading Style Sheets
Quick Reference
 |
|
|
|
|
|
|
| Characters |
| |
font-family |
Font family name |
IE3 NN4 |
|
| |
arial, courier, serif, etc. |
|
{font-family: arial} |
|
|
| |
font-size |
Font size |
IE3 NN4 |
|
| |
xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger, <length>, <percentage> |
|
{font-size: 10pt} |
|
|
| |
font-style |
Font style |
IE4 NN4 |
|
| |
normal, italic, oblic |
|
{font-style: italic} |
|
|
| |
font-weight |
Font weight |
IE4 NN4 |
|
| |
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
|
{font-weight: bold} |
|
|
| |
font-variant |
Normal or small caps |
IE4 NN6 |
|
| |
normal, small-caps |
|
{font-variant: small-caps} |
|
|
| |
text-transform |
Case |
IE4 NN4 |
|
| |
none, capitalize, uppercase, lowercase |
|
{text-transform: capitalize} |
|
|
| |
text-decoration |
Decoration |
IE4 NN4 |
|
| |
none, underline, overline, line-through, blink |
|
{text-decoration: underline} |
|
|
| |
color |
Color |
IE3 NN4 |
|
| |
<color> |
|
{color: blue} |
|
|
Text Alignment, Indentation, and Spacing
|
| |
text-align |
Horizontal alignment |
IE4 NN4 |
|
| |
left, right, center, justify |
|
{text-align: justify} |
|
|
| |
vertical-align |
Vertical alignment |
IE4 NN4 |
|
| |
baseline, top, text-top, middle, bottom, text-bottom, sub, super |
|
{vertical-align: top} |
|
|
| |
text-indent |
First line indentation |
IE4 NN4 |
|
| |
<length>, <percentage> |
|
{text-indent: 10px} |
|
|
| |
line-height |
Distance between lines |
IE4 NN4 |
|
| |
normal, <number>, <length>, <percentage> |
|
{line-height: 150%} |
|
|
| |
letter-spacing |
Space between characters |
IE4 NN6 |
|
| |
normal, <length> |
|
{letter-spacing: 1em} |
|
|
| |
word-spacing |
Distance between words |
IE6 NN6 |
|
| |
normal, <length> |
|
{word-spacing: 10px} |
|
|
Margins
|
| |
margin-top |
Top margin |
IE3 NN4 |
|
| |
auto, <length>, <percentage> |
|
{margin-top: 10px} |
|
|
| |
margin-bottom |
Bottom margin |
IE4 NN4 |
|
| |
auto, <length>, <percentage> |
|
{margin-bottom: 10px} |
|
|
| |
margin-left |
Left margin |
IE3 NN4 |
|
| |
auto, <length>, <percentage> |
|
{margin-left: 10px} |
|
|
| |
margin-right |
Right margin |
IE3 NN4 |
|
| |
auto, <length>, <percentage> |
|
{margin-right: 10px} |
|
|
Padding
|
| |
padding-top |
Top padding |
IE4 NN4 |
|
| |
<length>, <percentage> |
|
{padding-top: 10px} |
|
|
| |
padding-bottom |
Bottom padding |
IE4 NN4 |
|
| |
<length>, <percentage> |
|
{padding-bottom: 10px} |
|
|
| |
padding-left |
Left padding |
IE4 NN4 |
|
| |
<length>, <percentage> |
|
{padding-left: 10px} |
|
|
| |
padding-right |
Right padding |
IE4 NN4 |
|
| |
<length>, <percentage> |
|
{padding-right: 10px} |
|
|
Background
|
| |
background-position |
Position relative to the upper-left corner (0,0) |
IE4 NN6 |
|
| |
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, <x% y%>, <x y> |
|
{background-position: top left}
{background-position: 10% 10%}
{background-position: 20px 30px} |
|
|
| |
background-color |
Background color |
IE4 NN4 |
|
| |
transparent, <color> |
|
{background-color: #0000CC} |
|
|
| |
background-image |
Background image |
IE4 NN4 |
|
| |
none, <url> |
|
{background-image: url(marble.gif)} |
|
|
| |
background-repeat |
Repeats the background image from the upper-left corner |
IE4 NN4 |
|
| |
repeat, repeat-x, repeat-y, no-repeat |
|
{background-image: url(marble.gif);
background-repeat: no-repeat} |
|
|
| |
background-attachment |
Background image scrolling |
IE4 NN6 |
|
| |
scroll, fixed |
|
{background-image: url(marble.gif);
background-attachment: fixed} |
|
|
Borders
|
| |
border |
Border properties |
IE4 NN4 |
|
| |
<width> <style> <color> |
|
{border: thick dotted blue} |
|
|
| |
border-left |
Left border properties |
IE4 NN6 |
|
| |
<width> <style> <color> |
|
{border-left: thick dotted blue} |
|
|
| |
border-rigth |
Right border properties |
IE4 NN6 |
|
| |
<width> <style> <color> |
|
{border-right: thick dotted blue} |
|
|
| |
border-top |
Top border properties |
IE4 NN6 |
|
| |
<width> <style> <color> |
|
{border-top: thick dotted blue} |
|
|
| |
border-bottom |
Bottom border properties |
IE4 NN6 |
|
| |
<width> <style> <color> |
|
{border-bottom: thick dotted blue} |
|
|
 |
| |
border-width |
Border width |
IE4 NN4 |
|
| |
thin, medium, thick, <length> |
|
{border-width: thin} [All borders]
{border-width: thin medium} [Top-bot/left-right] |
|
|
| |
border-left-width |
Left border width |
IE4 NN4 |
|
| |
thin, medium, thick, <length> |
|
{border-left-width: thick} |
|
|
| |
border-right-width |
Right border width |
IE4 NN4 |
|
| |
thin, medium, thick, <length> |
|
{border-right-width: 0.1in} |
|
|
| |
border-top-width |
Top border width |
IE4 NN4 |
|
| |
thin, medium, thick, <length> |
|
{border-top-width: 0.5px} |
|
|
| |
border-bottom-width |
Bottom border width |
IE4 NN4 |
|
| |
thin, medium, thick, <length> |
|
{border-bottom-width: 0.5cm} |
|
|
|
| |
border-color |
Border color |
IE4 NN6 |
|
| |
<color> |
|
{border-color: blue} |
|
|
| |
border-left-color |
Left border color |
IE4 NN6 |
|
| |
<color> |
|
{border-left-color: #0000FF} |
|
|
| |
border-right-color |
Right border color |
IE4 NN6 |
|
| |
<color> |
|
{border-right-color: rgb(0,0,255)} |
|
|
| |
border-top-color |
Top border color |
IE4 NN6 |
|
| |
<color> |
|
{border-top-color: rgb(0%,0%,100%)} |
|
|
| |
border-bottom-color |
Bottom border color |
IE4 NN6 |
|
| |
<color> |
|
{border-bottom-color: #0000FF} |
|
|
|
2010 Liberty Boy
Le Havre