Sections
- Text
- Type
- Spacing
- Layout
- Layout Box
- Positioning
- Background
- Elements
- Lists
- Tables
- Generated
- Miscellany
- User Interface
- Printing
- Instructions
Properties
Instructions
JavaScript seems to be disabled in your browser. This web application does not work without JavaScript.
- Choose sections and properties from the respective columns.
- Some terms are underlined to signify that there is a note associated with it. Notes contain further explanations and examples.
- To view a term's note, it suffices to place the mouse pointer over the underlined term. The note will be displayed as long as the pointer remains there.
- A note can be made permanent by clicking on the underlined term. Clicking again reverts to temporary mode.
- The arrow keys can also be used to navigate sections, properties, and notes. IE and Opera users may want to use the W (up), A (left), S (right), Y (down) keys.
- Feedback can be directed to webmaster at culturedcode dot com or placed as a comment on our news pages. Enjoy!
- color color The text color. Also used for text decorations and as an initial value for border colors. Either a rgb-value, a hexadecimal value, or one of 17 predefined color names. depends on browser yes all elements FF Op Sa IE
- font
font
Shortcut for specifying all font properties and line-height
Either
font-style font-variant font-weight font-size/line-height font-family
or one of 6 predefined system font keywords."/line-height" is optional. Also font-style, font-variant, and font-weight are optional and may appear in any order.
see individual properties yes all elements FF Op Sa IE - font-family font-family A list of font family names. The first one found on the computer will be used. A comma "," separated list of specific font families and generic font families. depends on browser yes all elements, except replaced elements FF Op Sa IE
- font-size
font-size
The size of the font
Either a length, a percentage,
one of several predefined absolute sizes,
or relative sizes.
Percentages and the em unit are relative to the font size of the parent (e.g. 1.2em = 120%).
medium yes all elements FF Op Sa IE - font-style font-style Specifies an oblique or italic style within the current font family Either normal, italic, or oblique. normal yes all elements FF Op Sa IE
- font-variant font-variant Specifies a small-caps style within the current font family Either normal or small-caps. normal yes all elements FF Op Sa IE
- font-weight font-weight Specifies the weight of the current font Either normal, bold, bolder, lighter, or one of 9 numeric weights. normal yes all elements FF Op Sa IE
- text-decoration text-decoration Specifies underlining, over-lining, strike-out, or blinking effects Either none or any combination of the following keywords: underline, overline, line-through, blink. none no all elements FF Op Sa IE
- text-transform text-transform Specifies the case of text Either capitalize, uppercase, lowercase, or none. none yes all elements FF Op Sa IE
- white-space
white-space
Specifies how tabs, line breaks, and extra white space in an element's content is handled
Either normal, pre, nowrap, pre-wrap, or pre-line.
The values pre-wrap and pre-line were added in CSS 2.1 and are hardly supported by major browsers.
normal yes block elements FF Op Sa IE - text-align text-align Specifies the horizontal alignment of lines of text Either left, right, center, or justify. depends on browser yes block-level elements FF Op Sa IE
- text-indent
text-indent
Specifies the indentation of the first line of a paragraph
Either a length or a percentage.
Percentages refer to the parent element's width.
0 yes block-level elements FF Op Sa IE - line-height
line-height
Specifies the minimum distance between baselines of adjacent lines
Either a factor, a length, or a percentage.
Percentages and em values are calculated for the current font size. The result of this computation is inherited.
depends on browser yes all elements FF Op Sa IE - word-spacing
word-spacing
Specifies an additional amount of space to be added to the font specific word spacing
Either normal or a length.
Negative values are allowed provided the resulting amount of word spacing is not negative. Relative values are computed once and then inherited.
normal yes all elements FF Op Sa IE - letter-spacing
letter-spacing
Specifies an additional amount of space to be added to the font specific letter spacing
Either normal or a length.
Negative values are allowed. Relative values are computed once and then inherited.
normal yes all elements FF Op Sa IE - vertical-align
vertical-align
Raise or lower letters and images above or below the baseline of text
Either a percentage, a length, or one of 8 predefined vertical alignment keywords.
Percentages refer to the line height of the element itself. A negative value lowers the element.
baseline no inline elements FF Op Sa IE - direction direction Specifies writing direction, direction of table column layout, horizontal overflow, and the position of incomplete last lines. Either ltr or rtl. ltr yes all elements FF Op Sa IE
- unicode-bidi unicode-bidi Controls the Unicode standard bidirectional rendering algorithm Either normal, embed, or bidi-override. normal no all elements FF Op IE
- margin
margin
Specifies all 4 individual margin properties in one step
Up to 4 instances of either a length, a percentage, or auto.
Percentages refer to width of containing block. Negative values are allowed.
0 no all elements FF Op Sa IE - margin-...
margin-top, margin-right, margin-bottom, margin-left
Specifies the space between the element's bounding box
and the bounding boxes of adjacent elements
Either a length, a percentage, or auto.
Percentages refer to width of containing block. Negative values are allowed.
0 no all elements FF Op Sa (IE) - padding
padding
Specifies all 4 individual padding properties in one step
Up to 4 instances of either a length, or a percentage.
Percentages refer to width of containing block.
0 no all elements FF Op Sa IE - padding-...
padding-top, padding-right, padding-bottom, padding-left
Specifies how much space to insert between the contents of an element
and its margin or border (if there is one)
Either a length, or a percentage.
Percentages refer to width of containing block.
0 no all elements FF Op Sa IE - border
border, border-top, border-right, border-bottom, border-left
Specifies width, color, and style on one or more borders
border-width border-style border-color
Individual values are optional and may appear in any order.
see individual properties no all elements FF Op Sa IE - border-width border-width Specifies the border's thickness. The value needs to be large enough for some border styles to render correctly. Up to 4 instances of a length or the keywords thin, medium, or thick. medium no all elements FF Op Sa IE
- border-...-width border-top-width, border-right-width, border-bottom-width, border-left-width Specifies the border's thickness. The value needs to be large enough for some border styles to render correctly. Either a length or one of the keywords thin, medium, or thick. medium no all elements FF Op Sa IE
- border-style border-style Specifies all individual border styles in one step Up to 4 instances of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. none no all elements FF Op Sa (IE)
- border-...-style border-top-style, border-right-style, border-bottom-style, border-left-style Specifies the appearance of the border One of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. none no all elements FF Op Sa (IE)
- border-color border-color Specifies all border colors at once Up to 4 instances of a rgb-value, a hexadecimal value, transparent, or one of 17 predefined color names. taken from the color property of the element no all elements FF Op Sa (IE)
- border-...-color border-top-color, border-right-color, border-bottom-color, border-left-color The individual border colors Either a rgb-value, a hexadecimal value, transparent, or one of 17 predefined color names. taken from the color property of the element no all elements FF Op Sa (IE)
- width
width
Specifies the width of an element's content area
Either a length, a percentage, or auto.
Percentages refer to the parent element's width.
auto no block-level and replaced elements FF Op Sa (IE) - min-width
min-width
Protects an element from becoming too narrow
Either a length or a percentage.
Percentages refer to width of containing block.
0 no all elements except non-replaced inline elements and table elements FF Op Sa - max-width
max-width
Protects an element from becoming too wide
Either a length, a percentage, or none.
Percentages refer to width of containing block.
none no all elements except non-replaced inline elements and table elements FF Op Sa - height height Specifies the height of an element's content area Either a length or auto. auto no block-level and replaced elements FF Op Sa (IE)
- min-height
min-height
Protects an element from becoming too small
Either a length or a percentage.
Percentages refer to the containing block's height, provided that height has been set explicitly. Otherwise the value is treated as 0.
0 no all elements except non-replaced inline elements and table elements FF Op Sa - max-height
max-height
Protects an element from becoming too tall
Either a length, a percentage, or none.
Percentages refer to the containing block's height, provided that height has been set explicitly. Otherwise the value is treated as none.
none no all elements except non-replaced inline elements and table elements FF Op Sa - overflow
overflow
Determines the display of child elements that do not fit within the content area of their parent
Either visible, hidden, scroll, or auto.
- visible: children may stick out
- hidden: the part that sticks out is hidden
- scroll: scroll bars are shown
- auto: scroll bars appear if necessary
- clip clip Allows the visible portion of an element to be clipped to a specified rectangle Either a shape or auto. auto no absolutely positioned elements FF Op Sa IE
- display display Determines whether an element is displayed a a block, inline, list, or other type of item Either none, inline, block, list-item, run-in, inline-block, inline-table, or one of several parts of a table. inline no all elements (FF) Op Sa (IE)
- position
position
Specifies the method by which the position of the element's box is determined.
Elements that are not "static" make use of the positioning properties
"top, right, bottom, and left."
Either static, relative, absolute,
or fixed.
The values absolute, and fixed imply that the element must be block. The display property is ignored in this case.
static no all elements FF Op Sa (IE) - top, right, bottom, left top, right, bottom, left Specifies the position of fixed, absolutely, and relatively positioned elements Either a length, percentage, or auto. auto no elements with position other than static FF Op Sa IE
- float float Moves an element to the left or right of the parent element until it encounters another block-level element. Floated elements are removed from the normal flow and treated as block-level elements. Either left, right, or none. none. no all elements FF Op Sa IE
- clear clear Lists the sides on which floating elements are not allowed Either none, left, right, or both. none no all elements FF Op Sa IE
- z-index
z-index
Specifies the order in which overlapping elements are stacked on top of each other.
Normally elements that come later in the source document are on top of earlier elements.
Either auto or an integer.
A negative value places an element behind its containing block.
auto no positioned elements FF Op Sa IE - visibility visibility Makes an element completely transparent without removing it from the document flow Either visible, hidden, or collapse. visible yes all elements FF Op Sa IE
- background
background
Shortcut for setting all 5 background properties at once
background-attachment background-color
background-image background-position background-repeat.
Individual values can be specified in any order. If values are omitted the initial values of the respective properties are assumed.
see individual properties no all elements FF Op Sa IE - background-attachment background-attachment Determines whether the image should be fixed or moveable when the element is scrolled Either scroll or fixed. scroll no all elements FF Op Sa (IE)
- background-color background-color Sets the background color of the element's content and padding areas Either a rgb-value, a hexadecimal value, one of 17 predefined color names, or transparent. transparent no all elements FF Op Sa IE
- background-image background-image Sets the image at a specified URL as the background for an element Either a URL or none. none no all elements FF Op Sa IE
- background-position
background-position
Specifies the image's initial position
A horizontal position value followed by a vertical position value.
Both are specified by using either
a percentage, a length, or one of 5 position keywords.
Percentages are used to determine points both in the element and the image. The image is placed such that both points match.
0 0 no all elements FF Op Sa IE - background-repeat background-repeat Determines whether and how the image is repeated in the element Either repeat, repeat-x, repeat-y, no-repeat. repeat no all elements FF Op Sa IE
- list-style
list-style
Shortcut for specifying individual list-style properties at once
list-style-type list-style-position list-style-image.
Individual values are optional and can appear in any order.
see individual properties yes elements with display value list-item FF Op Sa IE - list-style-type list-style-type Specifies a label Either none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin, lower-greek, armenian, georgian. disc yes elements with display value list-item FF Op Sa (IE)
- list-style-position list-style-position Determines whether the label is placed inside our outside the list-item box Either inside or outside. outside yes elements with display value list-item FF Op Sa IE
- list-style-image list-style-image Specifies a small image to be used as the label Either a URL or none. none yes elements with display value list-item FF Op Sa IE
- border-collapse border-collapse Determines whether table cells have separate borders or share borders with adjacent cells, groups of rows and columns, or the table itself. Either collapse or separate. separate yes tables and inline tables (display: inline-table) FF Op Sa IE
- border-spacing
border-spacing
Determines the space between pairs of borders
Either 1 or 2 instances of a length.
If 2 values are present, the first one determines horizontal and the second vertical distance.
0 yes table and inline tables with separate borders FF Op Sa - empty-cells
empty-cells
Hides borders for empty cells
Either show or hide.
Examples:
hide 1/2 1/3 2/1 2/2 2/3 show 1/2 1/3 2/1 2/2 2/3 - table-layout
table-layout
Enables fast table layout
Either auto or fixed.
If table-layout is set to fixed than the width of the table columns are computed after the first row. Explicit values for width on column elements are honored.
auto no tables and inline tables having their width property not set to auto. FF Op Sa IE - caption-side caption-side Determines whether the caption is placed above or below the table Either top or bottom. top yes table-caption elements FF Op Sa
- other properties other properties affecting tables Properties that have a special effect when applied to tables or cells: width, vertical-align
- width
width
Sets a minimum width on a table or cell
Either a length, a percentage, or auto.
When applied to the table element, percentages refer to the parent element's width. Otherwise they refer to the table's width.
auto no table, table-column, and table-cell elements FF Op Sa IE - vertical-align vertical-align Determines the vertical alignment of table cells Either baseline, top, bottom, or middle. baseline no table cells FF Op Sa IE
- content content Specifies text to be used as the content of pseudo-elements that were introduced using :before or :after selectors One or more instances of either a text string, a counter, counters, or the keywords normal, open-quote, close-quote, no-open-quote, no-close-quote. normal no :before and :after pseudo-elements FF Op Sa
- quotes
quotes
Specifies the actual quote marks to be used when open-quote or close-quote
values are specified for the content property
Either none or any number of text string pairs.
Each pair of strings specifies open and close quote marks for increasingly nested levels of quotations.
depends on browser yes all elements FF Op - counter-increment counter-increment Increments the specified counters Either none or any number of counter names. none no all elements (FF) Op
- counter-reset counter-reset Resets the specified counters Either none or any number of counter names. none no all elements (FF) Op
- cursor cursor Either a URL, auto, or one of 19 predefined cursor keywords. auto yes all elements (FF) (Op) (Sa) IE
- outline
outline
Shortcut for setting all three individual outline properties.
An outline is drawn around the element but doesn't take up any space.
It may thus overlap adjacent elements.
Useful for temporarily highlighting an element.
outline-width outline-style outline-color
Individual values are optional and may appear in any order.
see individual properties no all elements FF Op Sa - outline-width outline-width Specifies the outline width Either a length or one of the keywords thin, medium, or thick. medium no all elements FF Op Sa
- outline-style outline-style Specifies the appearance of the outline Either one of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden. none no all elements FF Op Sa
- outline-color outline-color Specifies the color of the outline Either invert or on of the color values. invert no all elements FF Op Sa
- page-break-before
page-break-before
Determines how page breaks before an element should be handled
Either auto, always, avoid, left, or right.
Values left and right indicate that a page break should occur, and that the element should be placed on the left or right page, respectively. (Example: When printing books it is common for all chapters to start on the right page. This can be achieved by applying page-break-before: right to ever chapter heading.)
auto no block-level elements (FF) (Op) (Sa) (IE) - page-break-after
page-break-after
Determines how page breaks after an element should be handled
Either auto, always, avoid, left, or right.
Values left and right indicate that a page break should occur, and that the next element should be placed on the left or right page, respectively. (Example: page-break-after: avoid can be used to prevents page breaks after headings.)
auto no block-level elements (FF) (Op) (Sa) (IE) - page-break-inside
page-break-inside
Indicates whether a page break inside an element should or should not occur.
Either auto or avoid.
Example: page-break-inside: avoid could be used on list elements ul, ol, dl to prevent list items to appear on different pages.
auto yes block-level elements Op - widows widows If a paragraph is broken across two pages there is a certain number of lines that appear at the top and the bottom of the page (these are referred to as "widows" and "orphans", respectively). This property specifies the minimum number of widows. An integer. 2 yes block-level elements Op
- orphans orphans If a paragraph is broken across two pages there is a certain number of lines that appear at the top and the bottom of the page (these are referred to as "widows" and "orphans", respectively). This property specifies the minimum number of orphans. An integer. 2 yes block-level elements Op
- rgb-value
Red, green, and blue components specified as either percentages or numbers in the range 0 ... 255.
Examples:
rgb(100%, 50%, 0%), rgb(255, 128, 0)
- hexadecimal value
The symbol # followed by pairs of hexadecimal digits specifying red, green, and blue components. A hexadecimal digit is a number or letter in the range 0 ... 9, a (= 10) ... f (= 15).
Examples:
#ffa500 mi, #008000 mi, #800080 mi#rgb can be used as a shortcut for #rrggbb.
- color names
-
aqua mi,
black mi,
blue mi,
fuchsia mi,
gray mi,
green mi, lime mi, maroon mi, navy mi, olive mi, orange mi, purple mi, red mi, silver mi, teal mi,
white mi, yellow mi
- system font keywords
-
These are fonts typically used by the underlying operating system. The parenthesis contain a preview if your browser supports system font keywords
caption (captioned controls like buttons) icon (icon labels) menu (menu lists) message-box (dialog boxes) small-caption (small controls) status-bar (window status bar)
- specific font families
Examples:
"Verdana", "Times New Roman", "Andale Mono".
- generic font families
sans-serif (no cross-strokes) serif (with cross-strokes) monospace (each letter takes the same amount of space) cursive (resembles handwriting) fantasy (for decorative purposes)
- length
A decimal number followed by an absolute unit:
mm (Millimeter) cm (Centimeter, 1cm = 10mm) in (Inch, 1in = 2.54cm) pt (Point, 1pt = 1/72 in) pc (Pica, 1pc = 12pt) a relative unit:
em (1em = size of current font) ex (1ex = height of letter 'x' in current font) or the pixel unit:
px
- percentage
A decimal number in the range 0...100 followed by a % symbol.
- absolute sizes
-
For standard web browsers the CSS specification recommends the following scaling factors which also correspond to certain HTML headings:
xx-large 2 h1 x-large 1.5 h2 large 1.2 h3 medium 1 h4 small 0.89 h5 x-small 0.75 xx-small 0.6 h6
- relative sizes
The following keywords increase or decrease the current font size by one step according to the table of font sizes (see absolute sizes): larger, smaller
- numeric weights
- 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900
- pre
All white-space characters are preserved. This corresponds to the HTML <pre> element. Tabs are replaced by up to 8 spaces to ensure that columns have a constant width of 8 characters.
- nowrap
Collapses extra white-space like normal, but does not automatically break lines that are too long. Line breaks only occur at <br /> elements.
- pre-wrap
Like pre, but automatically introduces line breaks to avoid loosing content when the element's width is too narrow.
- pre-line
- Like normal, but line break characters in the text are honored.
- factor
A decimal number (e.g. 1.2) to be multiplied with the font size. Since this factor will be inherited, the line height will be recalculated accordingly for children with different font sizes.
- vertical alignment keywords
baseline sub (subscript) super (superscript) top (aligns top of element with tallest thing on the line) text-top (aligns top of element with top of parent's tallest letter) middle (element is centered 0.5ex above baseline) bottom (aligns bottom of element with lowest thing on the line) text-bottom (aligns bottom of element with bottom of parent's font)
- 4 instances
Margin, padding, border-width, border-style, and border-color properties can be used to set the associated individual top, right, bottom, left properties.
Example:
margin: 1em;
(all margins = 1em)margin: 1em 2em;
(top & bottom = 1em, left & right = 2em)margin: 1em 2em 3em;
(top = 1em, left & right = 2em, bottom = 3em)margin: 1em 2em 3em 4em;
(top = 1em, right = 2em, bottom = 3em, left = 4em)
- dotted
- border-width: 2px
- dashed
- border-width: 2px
- solid
- border-width: 2px
- double
- border-width: 3px
- groove
- border-width: 6px
- ridge
- border-width: 6px
- inset
- border-width: 6px
- outset
- border-width: 6px
- hidden
Similar to none except for shared borders in tables where hidden will remove other borders.
- shape
Example:
rect(5px, 110px, 55px, 10px)The values are top, right, bottom, left. The example thus refers to a rectangle that starts 5px from the top and 10px from the left, and is 100px wide and 50px tall.
- parts of a table
table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
- inline
Does not start and end a new line. May span several lines, generating text boxes on each line.
- block
Starts and ends on a new line.
- list-item
Displayed as a box with a label. The characteristics of the label are set with the list-style property.
- run-in
If the next sibling is displayed as a block box then the element is displayed as if it were the first inline box of that sibling.
- inline-block
Treated as an inline box seen from the outside, but the content inside the box is formatted as a block-level element.
- inline-table
- The following magic square
(from Albrecht Dürer's engraving named "Melancholia")
is realized as an inline-table
16 3 2 13 5 10 11 8 9 6 7 12 4 15 14 1
- static
The properties bottom, left, top, and right have no effect on static elements. Instead static elements are placed inside their parent's content box according to the normal flow of the document.
- relative
The properties bottom, left, top, and right move the element up, right, down, or left from its normal position.
A relatively positioned element becomes the containing block for absolutely positioned children.
- absolute
The properties bottom, left, top, and right place the element relative to the closest containing block.
An absolutely positioned element becomes the containing block for absolutely positioned children. The initial containing block is the viewport.
- fixed
The properties bottom, left, top, and right place the element relative to the viewport. Fixed elements do not move with the scroll bar.
A fixed element becomes the containing block for absolutely positioned children.
- position keywords
left (= 0% horizontal) right (= 100% horizontal) center (= 50% horizontal or vertical) top (= 0% vertical) bottom (= 100% vertical)
- disc
- item one
- item two
- item three
- circle
- item one
- item two
- item three
- square
- item one
- item two
- item three
- decimal
- item one
- item two
- item three
- decimal-leading-zero
- item one
- item two
- item three
- lower-roman
- item one
- item two
- item three
- upper-roman
- item one
- item two
- item three
- lower-alpha
- item one
- item two
- item three
- upper-alpha
- item one
- item two
- item three
- lower-latin
- item one
- item two
- item three
- upper-latin
- item one
- item two
- item three
- lower-greek
- item one
- item two
- item three
- armenian
- item one
- item two
- item three
- georgian
- item one
- item two
- item three
- baseline
Ensures that the baselines of all first lines of text across every row match.
- text string
Strings are either delimited by single or double quotes.
Examples:
"structure", 'presentation'Strings may span several lines if a backslash "\" appears immediately before the line break. The line break however is ignored in the output. To include a line break in the output the unicode escape sequence "\A" has to be used.
- counter
Examples:
counter(chapter), counter(section, roman)A single style sheet can make use of several counters. The name of the particular counter appears inside the parenthesis and can be chosen by the author. An optional list-style-type can be given to specify how counters are represented. The default is decimal.
- counters
A nested counter.
Examples:
counters(chapter, "."), counters(section, "-", roman)The second argument specifies the string inserted between numbers representing different nesting levels
- cursor keywords
- default,
pointer,
text,
help,
wait,
progress,
crosshair,
move,
e-resize, ne-resize, n-resize, nw-resize,
w-resize, sw-resize, s-resize, se-resizeHover over a keyword to get a preview of the respective cursor.