CSS Properties and Values
CIW Course in a Nutshell
Cascading Style Sheet Properties and Values
| background |
for changing the background colour and image of elements initial value depends on individual properties; not inherited; percentages allowed for background-position |
| any combination of the values background-attachment, background-color, background-image, background-repeat, and/or background-position, or inherit |
|
| background-attachment |
for determining if and how background images should scroll initial value: scroll; not inherited |
| either scroll, fixed, or inherit
|
|
| background-color |
for setting just the background colour of an element initial value: transparent; not inherited |
| either a color, transparent, or inherit
|
|
| background-position |
for setting the physical position of a specified background image initial values: 0% 0%, if a single percentage is set, it is used for the horizontal position and the initial value of the vertical is set to 50%, if only one keyword is used, the initial value of the other is center; applies to a block-level and replaced elements: not inherited; percentages refer to the size of the box itself |
| either one or two percentages or lengths
(or one percentage and one length) or one of top, center, or
bottom and/or one of left, center, or right. or inherit
|
|
| background-repeat |
for determining how and if background images should be tiled initial value: the element's color property; not inherited |
| one of repeat, repeat-x, repeat-y, no
repeat, or inherit
|
|
| border |
for defining all aspects of the border on on or more sides of an element. initial value depends on individual properties; not inherited. |
| any combination of the values of border-width, border-style, and/or a color, or inherit | |
| border-color |
for setting only the color of the border on one or more sides of an element initial value: the element's color property; not inherited. |
| from one to four colours, transparent, or inherit | |
| border-spacing |
for specifying the amount of space between borders in a table initial value: 0; may be applied only to table elements; inherited |
| either one or two lengths or inherit
|
|
| border-style |
for setting only the style of a border on one or more sides of an element initial value: none; not inherited |
| one to four of the following values: none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit | |
| border-top, border-right, border-bottom, border-left |
for defining all three border properties at once on only one side of an element initial value depend on individual values; not inherited |
| any combination of a single value each for border-width, border-style, and/or a color, or use inherit | |
| border-top-color, border-right-color, border-bottom-color, border-left-color |
for defining just the borders colour on only one side of an element initial value: none; not inherited
|
| any color or inherit
|
|
| border-top-style, border-right-style, border-bottom-style, border-left-style |
for defining just the border's style on only one side of an element initial value: none; not inherited |
| one of none, dotted, dashed, solid, double, groove, ridge, inset, outset, or inherit | |
| border-top-width, border-right-width, border-bottom-width, border-left-width |
for defining just the border's width on only one side of an element initial value; medium; not inherited |
| one of thin, medium, thick or a length | |
| border-width |
for defining the border's width on one or more sides of an element initial value: medium; not inherited |
| one to four of the following values: thin, medium, thick or a length | |
| clear |
for keeping elements from floating on one or both sides of an element initial value: none; may only be applied to block-level elements; not inherited |
| one of none, left, right, both, or
inherit
|
|
| bottom |
for setting the distance that an element should be offset from it's parent element's bottom edge initial value: auto; not inherited; percentages refer to height of containing block |
| either a percentage, length, auto, or
inherit
|
|
| color |
for setting the foreground colour, text colour, of an element initial value: parent's colour, some colours are set by browser; inherited |
| a color or inherit
|
|
| cursor |
for setting the cursor's shape initial value: auto; inherited |
| one of auto, crosshair, default, pointer, move, re-size, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, a URL, or inherit | |
| display |
for determining how and if an item should be displayed initial value: inline; not inherited |
| one of inline, block, list-item, none, inherit | |
| float |
for determining on which side of an element other elements are permitted to float initial value: none; may not be applied to positioned elements or generated content; not inherited |
| one of left, right, none, inherit
|
|
| font-family |
for choosing the font family for text initial value: depends on browser; inherited |
| one or more quotation mark enclosed font names followed by an optional generic font name, or use inherit | |
| font-size |
for setting the size of text initial value: medium; the computed value is inherited; percentages refer to parent elements font size font length is specified in pixels (px) but most browsers will support point sizes (pt) |
| an absolute size, a relative size, a
length, a percentage, or inherit
|
|
| font-style |
for making text italic initial value: normal; inherited |
| either normal, italic, oblique, or
inherit
|
|
| font-variant |
for setting text in small caps initial value: normal; inherited |
| either normal, small-caps, or inherit | |
| font-weight |
for applying, removing, and adjusting bold formatting initial value: normal; the numeric values are considered keywords and not integers (you can't choose 150, for example); inherited |
| either normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, or inherit | |
| height |
for setting the height of an element initial value: auto; may be applied to all elements except non-replaced inline elements, table columns, and column groups; not inherited |
| either a length, percentage, auto, or
inherit
|
|
| left |
for setting the distance that an element should be offset from it's parent element's left edge initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block |
| either a length, percentage, auto, or
inherit
|
|
| letter-spacing |
for setting the amount of space between letters initial vale: normal; inherited |
| either normal, a length, or inherit | |
| line-height |
for setting the amount of space between lines of text initial value: normal; inherited; percentages refer to the font size of the element itself |
| either normal, a number, a length, a percentage, or inherit | |
| list-style |
for setting a list's marker (regular or custom) and it's position initial value: depends on initial values of individual elements; may only be applied to list elements; inherited |
| any combination of the values for list-style-type, list-style-position and/or list-style-image, or use inherit | |
| list-style-image |
for designating a custom marker for a list initial value: none; may only be applied to list elements; overrides list-style-type; inherited |
| either a URL, none, or inherit
|
|
| list-style-position |
for determining the position of a list's marker initial value: outside; may only be applied to list elements; inherited |
| either inside, outside, or inherit
|
|
| list-style-type |
for setting a list's marker initial value: disc; may only be applied to list elements; not used if list-style-image is valid; inherited |
| either disc, circle, square, descimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, or inherit | |
| margin |
for setting the amount of space between one or more sides of an element's border and it's parent element initial value: depends on browser and on value of width; not inherited; |
| one to four of the following: length,
percentage, auto, or inherit
|
|
| margin-top, margin-right, margin-bottom, margin-left |
for setting the amount of space between only one side of an element's border and it's parent element initial value: 0; not inherited; percentages refer to width of containing block; the values for margin-right and margin-left may be overridden if sum of width, margin-right, and margin-left are larger than the parent element's containing block |
| either a length, percentage, auto, or
inherit
|
|
| marks |
for printing crop marks and/or cross marks initial value: none; can only be applied in a @page rule |
| either crop, cross or both, or use none or inherit | |
| max-height, max-width |
for setting the maximum height and/or width of an element respectively initial value: none; may not be applied to non-replaced inline elements or table elements; not inherited; percentages refer to height/width of containing block |
| either a length, percentage, none, or
inherit
|
|
| min-height, min-width |
for setting the minimum height and/or width of an element respectively initial value: 0; may not be applied to non-replaced inline elements or table elements; not inherited; percentages refer to height/width of containing block |
| either a length, percentage, or inherit
|
|
| orphans |
for specifying how many lines of an element may appear alone at the bottom of a page initial value: 2; may only be applied to block-level elements; inherited |
| either an integer or inherit
|
|
| overflow |
for specifying where extra content should go if it does not fit in the element's content area initial value: visible; may only be applied to block-level and replaced elements; not inherited |
| either visible, hidden, scroll, auto, or
inherit
|
|
| padding |
for specifying the distance between one or more sides of an element's content area and it's border initial value: depends on browser; not inherited; percentages refer to width of containing block |
| one to four lengths or percentages, or
inherit
|
|
| padding-top, padding-right, padding-bottom, padding-left |
for specifying the distance between one side of an element's content area and it's border initial value: 0; not inherited; percentages refer to width of containing block |
| either a length, percentage, or inherit
|
|
| page |
for specifying on which kind of page an element should be printed initial value: auto; may only be applied to block-level elements; inherited; names are defined with @page rule |
| either a page area's name or auto
|
|
| page-break-after, page-break-before |
for specifying when page breaks should or should not occur, when page is printed initial value: auto; may only be applied to block-level elements; inherited |
| either always, avoid, auto, right, left,
or inherit
|
|
| page-break-inside |
for keeping page breaks from dividing an element across pages, when printed initial value: auto; may only be applied to block-level elements; inherited |
| either avoid, auto, or inherit
|
|
| position |
for determining how an element should be positioned with respect to the document's flow initial value: static; may not be applied to generated content; not inherited |
| either static, relative, absolute, fixed,
or inherit
|
|
| right |
for setting the distance that an element should be offset from its parent element's right edge initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block |
| either a length, percentage, auto, or
inherit
|
|
| size |
for determining the size of the printing area in a defined page initial value: auto; may only be used within an @page rule |
| either individual lengths for width and height, a single value for both width and height, landscape, portrait, auto, or inherit | |
| table-display |
for choosing the algorithm that should be used to determine the widths of cells initial value: auto; not inherited |
| one of fixed, auto, or inherit
|
|
| text-align |
for aligning text initial value: depends on browser and writing direction; may only be applied to block-level elements; inherited |
| one of left, right, center, justify, or
inherit
|
|
| text-decoration |
for decorating text (mostly with lines) initial value: none; not inherited |
| any combination of underline, overline, line-through, and blink, none, or inherit | |
| text-indent |
for setting the amount of space the first line of a paragraph should be indented initial value: 0; may only be applied to block-level elements; percentages refer to width of containing block |
| either a length, percentage, or inherit
|
|
| text-transform |
for setting the capitalisation of an element's text initial value: none; inherited |
| either capitalize, uppercase, lowercase, none, or inherit | |
| top |
for setting the distance that an element should be offset from its parent element's top edge initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to height of containing block |
| either a length, percentage, auto, or
inherit
|
|
| vertical-align |
for aligning elements vertically initial value: baseline; may only be applied to inline-level and table cell elements; not inherited; percentage refer to the element's line-height property |
| either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length, or inherit | |
| visibility |
for hiding elements without taking item out of the document's flow initial value: inherit; which rather makes the fact that it's not inherited a moot point |
| either visible, hidden, collapse, or
inherit
|
|
| white-space |
for specifying how white space should be treated initial value: normal; may only be applied to block-level elements; inherited |
| either normal, pre, nowrap, or inherit
|
|
| widows |
for specifying how many lines of an element may appear alone at the top of a page initial value: 2; may only be applied to bloc-level elements; inherited |
| either an integer or inherit
|
|
| width |
for setting the width of an element initial value: auto; may not be applied to non-replaced inline elements, table rows, or row groups; not inherited; percentages refer to width of containing block |
| either a length, percentage, auto, or
inherit
|
|
| word-spacing |
for setting the distance between words initial value: normal; inherited |
| either normal, a length, or inherit | |
| z-index |
for setting the depth of an element with respect to overlapping elements initial value: auto; may only be applied to positioned elements; not inherited |
| either auto, an integer, or inherit
|
See the other pages in this section for an explanation of the more commonly used of these properties

