Tips
The tips used by CSS Preview. Note that CSS3 is under heavy development, properties may appear and disappear, and links become outdated.
Tips
| Property | Tip | CSS1 | CSS2 | CSS3 |
|---|---|---|---|---|
| Azimuth | The azimuth property specifies an angle that the sound should appear to be coming form, horizontally. | - | Yes | - |
| Background-attachment | The background-attachment chooses whether the background image should scroll with the page or not. | Yes | Yes | Yes |
| Background-color | The background-colour property should not be used on its own. You should apply a foreground colour at the same time with the color property. | Yes | Yes | Yes |
| Background-image | The background-image property supplies an URL for the background. | Yes | Yes | Yes |
| Background-position | The background-position property chooses where the origin of the background is. | Yes | Yes | Yes |
| Background-repeat | The background-repeat property specifies how the background image is to be tiled. | Yes | Yes | Yes |
| Border-collapse | This property affects how a table's borders are drawn - are the cell's borders collapsed together or not? | - | Yes | - |
| Border-color | The border-color property sets the colour of an element's borders. | Yes | Yes | Yes |
| Border-radius | BorderRadius is new in CSS3 | - | - | Yes |
| Border-spacing | This is the space between borders in table cells. | - | Yes | - |
| Border-style | The border-style property sets the style of an element's borders. | Yes | Yes | Yes |
| Border-width | The border-width property sets the width of an element's borders. | - | Yes | - |
| Bottom | The bottom property sets how far the bottom of an element should be from the bottom of its containing block. | - | Yes | - |
| Caption-side | The caption-side property specifies where on a table a caption should go. | - | Yes | - |
| Clear | The clear property is used to specify which sides of a block-level element are allowed next to a floating box. | Yes | Yes | - |
| Clip | The clip property allows you to specify a different visible region of an element than normal. | - | Yes | - |
| Color | The color property controls the foreground colour of text. If you apply a colour, you should always apply a background colour at the same time. | Yes | Yes | - |
| Content | The content property is used with :before and :after to add content to a document. It should now be useable. | - | Yes | - |
| Counter-increment | The counter-increment property | - | Yes | - |
| Counter-reset | The counter-reset property . | - | Yes | - |
| Cue | The cue property is shorthand - it can apply cue-before and cue-after at the same time. | - | Yes | - |
| Cue-after | A sound is specified which is played after the element is read. | - | Yes | - |
| Cue-before | A sound is specified which is played before the element is read. | - | Yes | - |
| Cursor | The cursor property takes either a named value or a URL. Possible values: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help | - | Yes | - |
| Direction | Sets the direction of the text, rtl or ltr. | - | Yes | - |
| Display | This is used to specify how something is drawn. It is usually used with the "none" value in DHTML to show and hide elements | Yes | Yes | - |
| Elevation | The elevation property specifies a vertical angle that the sound should appear to be coming from. | - | Yes | - |
| Empty-cells | This allows you to specify if empty cells in a table have a border around them or not. | - | Yes | - |
| Float | This can be used to float a box to the left or right, and have content flow around it. | Yes | Yes | - |
| Font | The font property is a shorthand to the other font properties. | Yes | Yes | - |
| Font-family | The font family property allows you to specify a mix of named fonts and generic fonts. For example, you could ask for "Arial, Helvetica, sans-serif", meaning Arial is your first choice, then Helvetica, then the default sans-serif font. | Yes | Yes | - |
| Font-size | The font-size property alters how big the text will be. You can use the units em , ex , px , in , cm , mm , pt , pc , % or the values xx-small , x-small , small , medium , large , x-large , xx-large , larger , smaller | Yes | Yes | - |
| Font-size-adjust | The font-size-adjust property is used to keep the font looking the same size when the font is changed. It takes into account the different aspect ratios of different fonts. Times New Roman has a value of .46, Trebuchet MS is .53. | - | Yes | - |
| Font-stretch | The font-stretch property is supposed to allow you to request a font to be wider or narrower. This does not appear to have any browser support currently. | - | Yes | - |
| Font-style | The Font Style property lets you apply italic and oblique styles to your text. These are slightly different - italic fonts have extra decorations, while oblique fonts do not. Not all browsers know the difference. | Yes | Yes | - |
| Font-variant | The Font Variant property is used to apply a small caps style to your text. Be careful with this, as it decreases readability. | Yes | Yes | - |
| Font-weight | The font-weight property controls how bold the font looks. It also lets you request that text is displayed lighter than normal. | Yes | Yes | - |
| Height | This sets the height of elements. | Yes | Yes | - |
| Left | Left specifies how far the left edge of the element should be from the left edge of the containing block. | - | Yes | - |
| Letter-spacing | If you give this a value, it is in addition to any letter spacing already present. | - | Yes | - |
| Line-height | The line-height property can be used to alter line spacing. As well as the usual sizes, you can set the value as a number, such as making your lines 1.5 high (half a line's space between lines). | Yes | Yes | - |
| List-style | The list-style property is a shorthand to the other list-style properties. | Yes | Yes | - |
| List-style-image | The list-style-image property specifies an URL to an image to use as list markers. | Yes | Yes | - |
| List-style-position | The list-style-position property chooses whether the list marker is inside or outside the item's box | Yes | Yes | - |
| List-style-type | The list-style type specifies the style of numbering or marks. Possible values are: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none | Yes | Yes | - |
| Margin | The margin property allows you to set margins on all edges at once. | Yes | Yes | - |
| Margin-bottom | The margin-bottom element sets the size of an element's bottom margin. | Yes | Yes | - |
| Margin-left | The margin-left property sets the size of an element's left margin. | Yes | Yes | - |
| Margin-right | The margin-right property specifies the size of an element's right margin. | Yes | Yes | - |
| Margin-top | The margin-top property sets the size of the top margin of an element. | Yes | Yes | - |
| Marker-offset | The marker-offset property | - | Yes | - |
| Marks | Marks allows you to add crop or cross (alignment) marks to your printouts. | - | Yes | - |
| Max-height | The max-height property gives a height which an element should not exceed. | - | Yes | - |
| Max-width | This property requests that the width of an element does not go above a certain size. | - | Yes | - |
| Min-height | The min-height property gives a height which an element should not go below. | - | Yes | - |
| Min-width | The min-width property sets a width which an element should not go below. | - | Yes | - |
| Orphans | Lorem the ipsum | - | Yes | - |
| Outline | The outline property is a shorthand for the individual outline properties. | - | Yes | - |
| Outline-color | The outline-color property colours the outline. | - | Yes | - |
| Outline-style | The outline-style property takes the same values as border-style. | - | Yes | - |
| Outline-width | The outline-width property takes the same values as border-width. | - | Yes | - |
| Overflow | This specifies how an element should behave if its content is too big for the space it provides. | - | Yes | - |
| Padding | The padding property is a shorthand, allowing you to set padding on all sides at once. | - | Yes | - |
| Padding-bottom | The padding-bottom property sets the value of an element's bottom padding. | - | Yes | - |
| Padding-left | The padding-left property sets the size of an element's left padding. | - | Yes | - |
| Padding-right | The padding-right property sets the size of an element's right padding. | - | Yes | - |
| Padding-top | The padding-top property sets the size of an element's top padding. | - | Yes | - |
| Page | The page property allows certain elements to be printed on named page types, for example, making a table print landscape. | - | Yes | - |
| Page-break-after | Lorem the ipsum | - | Yes | - |
| Page-break-before | Lorem the ipsum | - | Yes | - |
| Page-break-inside | Lorem the Ipsum | - | Yes | - |
| Pause | This is a shorthand property that sets pause-before and pause-after together. | - | Yes | - |
| Pause-after | The pause-after property specifies the pause after an element has been read out. | - | Yes | - |
| Pause-before | The pause-before property specifies how long to pause before reading an element out. | - | Yes | - |
| Pitch | The pitch property specifies the average pitch of a speaking voice. | - | Yes | - |
| Pitch-range | The pitch-range property changes how expressive a voice is. 0 gives a totally dull, monotonus voice, 50 is normal, and 100 has a high range, and is very expressive. | - | Yes | - |
| Play-during | The play-during property specifies a background sound to be played when the element's contents are being read out. | - | Yes | - |
| Position | The position property selects the positioning scheme for an element. | - | Yes | - |
| Quotes | The quotes property affects the rendering of the <Q> tag. | - | Yes | - |
| Richness | The richness property lets you choose between a soft voice, and one with more power that can "carry" itself. 50 is normal, 0 is soft and 100 is rich. | - | Yes | - |
| Right | The right property sets how far the right edge of an element should be from the right edge of a containing block. | - | Yes | - |
| Size | The size property is used to specify a page's print size. | - | - | - |
| Speak | This can be used to turn on or off speaking of an element, and also to make it spelled out rather than spoken normally. | - | Yes | - |
| Speak-header | The speak-header property chooses if header cells are spoken once, or before every cell that they relate to. | - | Yes | - |
| Speak-numeral | The speak-numeral property affects whether the digits are spoken one at a time, or converted into friendly numbers (e.g. "one hundred and two") | - | Yes | - |
| Speak-punctuation | The speak-punctuation property is used to specify whether punctuation is read out or not - used for program code. | - | - | - |
| Speech-rate | Selects how fast the text is to be spoken. Named values or words per minute. | - | Yes | - |
| Stress | The stress property changes how much different parts of a sentence are emphasised. | - | Yes | - |
| System Fonts | If you are trying to make part of your webpage customised to look like the user's choice of desktop settings (for a web application or similar), you can use system fonts. | - | Yes | - |
| Table-layout | This lets you switch between two different table layout algorithms - the fixed, which doesn't depend on content, and auto, which is the browser's default. | - | Yes | - |
| Text-align | As well as the usual left,right,center,justify properties, you can also set a string which will be aligned upon (for example, a decimal point). String alignment is only for table cells. | - | Yes | - |
| Text-decoration | Text-decoration is used to add underline, line-through, overline and everyone's favourite, blink. | - | Yes | - |
| Text-indent | The text-indent property indents the first line of a paragraph. This is a replacement for the "1 pixel GIF" techniques people have previously used to achieve this effect. | - | Yes | - |
| Text-shadow | You'll need Konqueror or Safari to try this out. | - | Yes | - |
| Text-transform | This property affects the case of the text it is applied to. | - | Yes | - |
| Top | Top sets the distance this element is from the top of it's containing block. | - | Yes | - |
| Unicode-bidi | Affects text direction. Values are normal, embed, bidi-override | - | Yes | - |
| Vertical-align | This specifies how different boxes line up when placed next to each other. | - | Yes | - |
| Visibility | The visibility property can be used to show and hide an element. | - | Yes | - |
| Voice-family | The voice-family property selects the reader. For example , "man" , "woman" , "Chris Tarrant" | - | Yes | - |
| Volume | The volume property changes the median volume. | - | Yes | - |
| White-space | This affects how the whitespace in the element is treated. Normal collapses whitespace, pre preserves it, and nowrap doesn't wrap. | - | Yes | - |
| Widows | The minimum number of lines of a paragraph that must be left at the top of the page. | - | Yes | - |
| Width | The width property sets how wide an element should be rendered. | - | Yes | - |
| Word-spacing | If a value is given, this is in addition to the current spacing, rather than overriding it. You can, however, give a negative value if you want the spacing to be tighter. | - | Yes | - |
| Z-index | The Z-index property is used to decide which page elements are on top of which others. | - | Yes | - |