| Property | Value | Description |
|---|---|---|
| font-family | Specific font (Arial, Times, Verdana) Familly (serif, sans-serif, fantasy, monospace, cursive) |
Defines one or more font names or font families. If multiple fonts are defined, the first one found on the user's system will be used. |
| font-style | normal, italic, oblique | Defines the writing style |
| font-weight | lighter, normal, bold or bolder. numeric value (100, 200, 300, 400, 500, 600, 700, 800, 900) |
Defines the thickness of the font |
| font-size | xx-small, x-small, small, medium, large, x-large, xx-large size in points (pt), cm, % |
Defines the font size |
| font-variant | normal, small-caps | Defines a variant (small capitals) |
| font | font: Verdana, Arial, bold italic 8px; | Shortcut for all properties |
| Property | Value | Description |
|---|---|---|
| color | "#RRGGBB" | Defines the text colour |
| line-height | line-height: 12pt; | Defines line spacing |
| text-align | left, center, right or justify | Defines text alignment |
| text-indent | text-indent: 5px; | Defines indentation |
| text-decoration | blink (blinking), underline (underlined), line-through (strikethrough), overline (overlined) or none (no decoration) | Defines decoration |
| text-shadow | text-shadow: 1px 2px 4px black; | Defines a drop shadow for the text, representing, respectively, the shadow's right-shift, down-shift, blur radius, and colour. |
| text-transform | uppercase, lowercase, or capitalize | Defines the case of the text |
| white-space | normal (text will wrap to the next line), pre (text appears with whatever blank spaces were entered), nowrap (text will not wrap) | Hyphenation |
| word-spacing | word-spacing: 6px; | Defines how much space to put between words |
| width | in points (pt), inches (in), in cm, on pixels (px), or as a % | Defines the width of a text element or image |
| height | in points (pt), inches (in), in cm, on pixels (px), or as a % | Defines the height of a text element or image |
| Property | Value | Description |
|---|---|---|
| background-color | "#RRGGBB" | Defines a background colour |
| background-image | url(http://url) | Defines a background image |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | Defines how the background image repeats |
| background-attachment | scroll, fixed | Specifies if the background image will stay in place when the screen scrolls |
| background-position | top, middle, bottom, left, center or right | Positions the image relative to the upper-left corner |
| background | background: url(test.jpg) fixed repeat; | Shortcut for background properties |
| Property | Example | Description |
|---|---|---|
| margin-top | margin-top: 5px; | Value of top margin |
| margin-right | margin-right: 0.5em; | Value of right margin |
| margin-bottom | margin-bottom: 2pt; | Value of bottom margin |
| margin-left | margin-left: 0; | Value of left margin |
| margin | margin: 5px 0.5em 2pt 0; | Shortcut for margin properties |
| Property | Value | Description |
|---|---|---|
| border[-top -left -bottom -right]-width | in points (pt), inches (in), in cm, on pixels (px), or as a % | Border thickness [for the location given] |
| border[-top -left -bottom -right]-color | border-left-color: #RRGGBB; | Border colour [for the location given] |
| border[-top -left -bottom -right]-style | solid, dashed, dotted, double or ridge | Border style [for the location given] |
| border-collapse | collapse separate |
Adds or removes "3D" effect |
| Border | border: 1px 0 0 2px dotted green; | Global shortcut for border properties |
| Property | Value | Description |
|---|---|---|
| padding-top | padding-top: 3px; | Padding between the element and the top border |
| padding-right | padding-right: 0.25em; | Padding between the element and the right border |
| padding-bottom | padding-bottom: 0; | Padding between the element and the bottom border |
| padding-left | padding-left: 2pt; | Padding between the element and the left border |
| padding | padding: 3px 0.25em 0 2pt; | Shortcut for all padding properties |
| Property | Value | Description |
|---|---|---|
| border-collapse | separate or collapse | Merges cell borders (collapse), doesn't merge them (separate) |
| border-spacing | border-spacing: 4px; | Cell spacing |
| caption-side | top, bottom, left or right | Placing the table's caption |
| empty-cells | show or collapse | Display (show) or hide (collapse) empty cells |
| table-layout | fixed (independent of cell content) or auto (depending on cell content) | Fixed or variable width |
| speak-headers | always (always before each cell) or once (just once) | Property for the blind and visually impaired, indicating how sound behaves when reading table header cells |
| Property | Value | Description |
|---|---|---|
| list-style-type | decimal, upper-roman, lower-latin, disc, circle, square or none | Type of bullets and numbering |
| list-style-image | list-style-image: url(image.png); | Personalise bullets with an image |
| list-style-position | inside or outside | Specifies bullet indentation |
| list-style | Shortcut to list properties |
| Property | Value | Description |
|---|---|---|
| @page | @page(size: portrait) | Defines print layout |
| size | auto, landscape or portrait | Printing format |
| margin-top | margin-top: 3 cm; | Top margin |
| margin-right | margin-right: 1.5 cm; | Right margin |
| margin-bottom | margin-bottom: 1 cm; | Bottom margin |
| margin-left | margin-left: 2 cm; | Left margin |
| marks | crop (crop marks), cross (cross marks), none (no marks) | Crop marks and cross marks |
| page-break-before | Always, avoid | Forces a page break before an element |
| page-break-after | Always, avoid | Forces a page break after an element |
| orphans | orphans: 2; | Avoids having orphaned lines at the end of a page. Defines the minimum number of lines of an element that are left at the bottom of a page before a page break. |
| widows | widows: 1; | Avoids having widowed lines at the end of a page. Defines the minimum number of lines of an element that are left at the top of a page after a page break. |
