| Attribute |
Values |
Description |
Sample |
| background |
An image, a color |
Sets the background. |
background: orange; |
background |
| color |
A color |
Sets the foreground (ie. text) color. |
color: purple; |
color |
| border |
* |
Sets the border of a node. |
border: 2px dashed red; |
border |
| padding |
A length, a percentage |
Space between content and border |
padding: 12px; |
padding |
| margin |
A length, a percentage |
Space between border and outside |
margin: 12px; |
margin |
| display |
type |
How node should be displayed |
display: none; |
display |
| vertical-align |
type |
How to align text in the box |
vertical-align: top; |
vertical-align  |
| text-align |
type |
How to align text in the box |
text-align: center; |
text-align |
| text-indent |
A length, a percentage |
How much to indent the first line of text. |
text-indent: 3em; |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis,
semper quis fringilla ut, viverra nec risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. |
| text-decoration |
type |
How to decorate (e.g. underline) the text. |
text-decoration: line-through; |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis,
semper quis fringilla ut, viverra nec risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. |
| line-height |
A length, a percentge |
The line height of the text (e.g. doubled-spaced) |
line-height: 3em; |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis,
semper quis fringilla ut, viverra nec risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. |
| height |
A length, a percentage |
The height of the box |
height: 3cm; |
Lorem ipsum |
| width |
A length, a percentage |
The width of the box |
width: 3cm; |
Lorem ipsum |
| min-height |
A length, a percentage |
The minimum height of the box |
|
|
| min-width |
A length, a percentage |
The minimum width of the box |
|
|
| max-height |
A length, a percentage |
The maxium height of the box |
max-height: 4.1em; max-width: 3cm; overflow: scroll; |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis, semper quis fringilla ut, viverra nec risus. |
| max-width |
A length, a percentage |
The maximum width of the box |
max-width: 1.5cm; |
Lorem ipsum |
| font-weight |
* |
The text weight |
font-weight: bold; |
Lorem ipsum |
| font-size |
* |
The text weight |
font-size: small; |
Lorem ipsum |
| font-family |
* |
The text font family |
font-family: cursive; |
Lorem ipsum |
| float |
direction |
Where to float the node to |
float: right; |
Lorem ipsum |
| list-style |
* image position type |
list-style-image: url(...);
list-style-position: hanging,inside,outside;
list-style-type: disc,square,none,upper-alpha,lower-roman; |
list-style-image: url(tiny_cat.png); |
- Alpha
- Beta
- Gamma
- Delta
- Epsilon
|
| list-style-position: inside; list-style-type: lower-roman; |
- Alpha
- Beta
- Gamma
- Delta
- Epsilon
|
| list-style-position: outside; list-style-type: upper-alpha; |
- Alpha
- Beta
- Gamma
- Delta
- Epsilon
|
| background-position |
(See http://www.w3schools.com/cssref/pr_background-position.asp
for more details) |
background-position: 75% 25%; |
|
| background-repeat |
type: repeat, repeat-x, repeat-y, no-repeat |
Specifies how a background image repeats in the space available |
background-repeat: repeat-x; |
|
| background-repeat: repeat-y; |
|
| background-repeat: repeat; |
|
| visibility |
type: visible, hidden |
Whether the element is visible; not like display. |
visibility: hidden; |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis,
semper quis fringilla ut, viverra nec risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. |
| outline |
(see border) |
Just like border except the outline takes no space |
outline: red solid 9px; |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis,
semper quis fringilla ut, viverra nec risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. |
| white-space |
type: normal, nowrap, pre, pre-line, pre-wrap |
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis,
semper quis fringilla ut, viverra nec risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
|
| word-spacing |
A length |
The space between words |
word-spacing: 2em; |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur massa turpis,
semper quis fringilla ut, viverra nec risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. |
| border-radius |
A length, a percentage |
How much to round the corners of the border |
border-radius: 1em; |
Lorem ipsum |
| box-shadow |
x y w h color |
Definition of the box shadow |
border-radius: 1em; |
Lorem ipsum |
| border-collapse |
collapse, separate |
Whether cell borders are rectangles or long lines |
border-collapse: collapse; |
|
| border-collapse: separate; |
|