Font properties
Property | Value | Description |
font-family | Specific font (Arial, Times, Verdana) | 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. | Defines the thickness of the font |
font-size | xx-small, x-small, small, medium, large, x-large, xx-large | 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 |
Text and paragraphs
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 |
Background colours
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 |
Margins
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 |
Borders
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 | Adds or removes "3D" effect |
Border | border: 1px 0 0 2px dotted green; | Global shortcut for border properties |
Padding
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 |
Tables
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 |
Lists
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 |
Page layout
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. |
No comments:
Post a Comment