The table in this chapter is designed to be a quick reference to each of the properties and its allowed values. I have also indicated each property's default or initial value, the elements to which it may be applied, whether or not the property is inherited, and what percentages refer to if they may be used. Finally, I have referenced the page number in the book where the property or value is discussed.
Many of the properties accept a length, percentage, or color for values. For more details on entering values, see A Property's Value on page 124.
I hope you will find it useful.
CSS Properties and Values
Property/Values | Description and Notes
|
---|
background any combination of the values for background-attachment, background-color, background-image, background-repeat, and/or background-position, or inherit | for changing the background color and image of elements (pp. 172, 240) initial value depends on individual properties; not inherited; percentages allowed for background-position |
background-attachment either scroll, fixed, or inherit | for determining if and how background images should scroll (p. 172) initial value: scroll; not inherited |
background-color
either a color, TRansparent, or inherit | for setting just the background color of an element (pp. 172, 240) initial value: transparent; not inherited |
background-image either a URL, none, or inherit | for setting just the background image of an element (pp. 172, 240) initial value: none; not inherited |
background-position 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 use inherit. | for setting the physical position of a specified background image (p. 172) initial value: 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 block-level and replaced elements: not inherited; percentages refer to the size of the box itself |
background-repeat one of repeat, repeat-x, repeat-y, no-repeat, or inherit | for determining how and if background images should be tiled (p. 172) initial value: repeat; not inherited |
border any combination of the values of border-width, border-style, and/or a color, or inherit | for defining all aspects of a border on all sides of an element (pp. 184, 230) initial value depends on individual properties; not inherited |
border-color from one to four colors, transparent, or inherit | for setting only the color of the border on one or more sides of an element (pp. 184, 230) initial value: the element's color property; not inherited |
border-spacing either one or two lengths or inherit | for specifying the amount of space between borders in a table (p. 242) initial value: 0; may be applied only to table elements; inherited |
border-style
one to four of the following values: none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit | for setting only the style of a border on one or more sides of an element (pp. 184, 230) initial value: none; not inherited |
border-top, border-right, border-bottom, border-left any combination of a single value each for border-width, border-style, and/or a color, or use inherit. | for defining all three border properties at once on only one side of an element (pp. 184, 230) initial value depends on individual values; not inherited |
border-top-color, border-right-color, border-bottom-color, border-left-color one color or inherit | for defining just the border's color on only one side of an element (pp. 184, 230) initial value: the value of the color property; not inherited |
border-top-style, border-right-style, border-bottom-style, border-left-style one of none, dotted, dashed, solid, double, groove, ridge, inset, outset, or inherit | for defining just the border's style on only one side of an element (pp. 184, 230) initial value: none; not inherited |
border-top-width, border-right-width, border-bottom-width, border-left-width one of thin, medium, thick or a length | for defining just the border's width on only one side of an element (pp. 184, 230) initial value: medium; not inherited |
border-width one to four of the following values: thin, medium, thick or a length | for defining the border's width on one or more sides of an element (pp. 184, 230) initial value: medium; not inherited |
bottom either a percentage, length, auto, or inherit | for setting the distance that an element should be offset from its parent element's bottom edge (pp. 179, 178, 180) initial value: auto; not inherited; percentages refer to height of containing block |
clear one of none, left, right, both, or inherit inherit | for keeping elements from floating on one or both sides of an element (p. 182) initial value: none; may only be applied to block-level elements; not inherited |
clip one of auto, rect, or inherit | for displaying only a portion of an element (p. 191) initial value: auto, applies only to absolutely positioned elements |
color a color or inherit | for setting the foreground color of an element (p. 160) initial value: parent's color, some colors are set by browser; inherited |
cursor one of auto, crosshair, default, pointer, progress, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, a URL, or inherit | for setting the cursor's shape (p. 186) initial value: auto; inherited |
display one of inline, block, list-item, none, inherit | for determining how and if an element should be displayed (pp. 190, 193, 194, 196, 205) initial value: inline; not inherited |
float one of left, right, none, inherit | for determining on which side of an element other elements are permitted to float (pp. 181, 235) initial value: none; may not be applied to positioned elements or generated content; not inherited |
font if desired, any combination of the values for font-style, font-variant and font-weight followed by the required font-size, an optional value for line-height and the also required font-family, or use inherit | for setting at least the font family and size, and optionally the style, variant, weight, and line-height of text (p. 159) initial value depends on individual properties; inherited; percentages allowed for values of font-size and line-height |
font-family one or more quotation mark-enclosed font names followed by an optional generic font name, or use inherit | for choosing the font family for text (p. 152) initial value: depends on browser; inherited |
font-size
an absolute size, a relative size, a length, a percentage, or inherit | for setting the size of text (p. 156) initial value: medium; the computed value is inherited; percentages refer to parent element's font size |
font-style either normal, italic, oblique, or inherit | for making text italic (p. 154) initial value: normal; inherited |
font-variant either normal, small-caps, or inherit | for setting text in small caps (p. 167) initial value: normal; inherited |
font-weight either normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, or inherit | for applying, removing, and adjusting bold formatting (p. 155) initial value: normal; the numeric values are considered keywords and not integers (you can't choose 150, for example); inherited |
height either a length, percentage, auto, or inherit | for setting the height of an element (p. 174) initial value: auto; may be applied to all elements except non-replaced inline elements, table columns, and column groups; not inherited |
left either a length, percentage, auto, or inherit | for setting the distance that an element should be offset from its parent element's left edge (pp. 179, 180, 178) initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block |
letter-spacing
either normal, a length, or inherit | for setting the amount of space between letters (p. 162) initial value: normal; inherited |
line-height either normal, a number, a length, a percentage, or inherit | for setting the amount of space between lines of text (p. 158) initial value: normal; inherited; percentages refer to the font size of the element itself |
list-style any combination of the values for list-style-type, list-style-position and/or list-style-image, or use inherit | for setting a list's marker (regular or custom) and its position (p. 222) initial value depends on initial values of individual elements; may only be applied to list elements; inherited |
list-style-image either a URL, none, or inherit | for designating a custom marker for a list (p. 220) initial value: none; may only be applied to list elements; overrides list-style-type; inherited |
list-style-position either inside, outside, or inherit | for determining the position of a list's marker (p. 221) initial value: outside; may only be applied to list elements; inherited |
list-style-type either disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, or inherit | for setting a list's marker (p. 218) initial value: disc; may only be applied to list elements; not used if list-style-type is valid; inherited |
margin one to four of the following: length, percentage, or auto, or inherit | for setting the amount of space between one or more sides of an element's border and its parent element (pp. 176, 208, 211, 234) initial value depends on browser and on value of width; not inherited; percentages refer to width of containing block |
margin-top, margin-right, margin-bottom, margin-left either a length, percentage, auto, or inherit | for setting the amount of space between only one side of an element's border and its parent element (p. 176) 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 parent element's containing block |
max-height, max-width either a length, percentage, none, or inherit | for setting the maximum height and/or width of an element, respectively (p. 174) 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 |
min-height, min-width either a length, percentage, or inherit | for setting the minimum height and/or width of an element, respectively (p. 174) 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 |
orphans either an integer or inherit | for specifying how many lines of an element may appear alone at the bottom of a page (p. 214) initial value: 2; may only be applied to block-level elements; inherited |
overflow either visible, hidden, scroll, auto, or inherit | for determining where extra content should go if it does not fit in the element's content area (p. 187) initial value: visible; may only be applied to block-level and replaced elements; not inherited |
padding one to four lengths or percentages, or inherit | for specifying the distance between one or more sides of an element's content area and its border (p. 177) initial value depends on browser: not inherited; percentages refer to width of containing block |
padding-top, padding-right, padding-bottom, padding-left either a length, percentage, or inherit | for specifying the distance between one side of an element's content area and its border (p. 177) initial value: 0; not inherited; percentages refer to width of containing block |
page-break-after, page-break-before either always, avoid, auto, right, left, or inherit | for specifying when page breaks should or should not occur (p. 212) initial value: auto; may only be applied to block-level elements; not inherited |
page-break-inside either avoid, auto, or inherit | for keeping page breaks from dividing an element across pages (p. 212) initial value: auto; may only be applied to block-level elements; inherited |
position either static, relative, absolute, fixed, or inherit | for determining how an element should be positioned with respect to the document's flow (pp. 179, 178, 180) initial value: static; may not be applied to generated content; not inherited |
right either a length, percentage, auto, or inherit | for setting the distance that an element should be offset from its parent element's right edge (pp. 179, 178, 180) initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block |
table-layout one of fixed, auto, or inherit | for choosing the algorithm that should be used to determine the widths of cells (p. 252) initial value: auto; not inherited |
text-align one of left, right, center, justify, a string, or inherit | for aligning text (p. 165) initial value depends on browser and writing direction; may only be applied to block-level elements; inherited |
text-decoration any combination of underline, overline, line-through, and blink, or none or inherit | for decorating text (mostly with lines) (p. 168) initial value: none; not inherited |
text-indent either a length, percentage, or inherit | for setting the amount of space the first line of a paragraph should be indented (p. 163) initial value: 0; may only be applied to block-level elements; inherited; percentages refer to width of containing block |
text-transform either capitalize, uppercase, lowercase, none, or inherit | for setting the capitalization of an element's text (p. 166) initial value: none; inherited |
top either a length, percentage, auto, or inherit | for setting the distance that an element should be offset from its parent element's top edge (pp. 179, 178, 180) initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to height of containing block |
vertical-align either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length, or inherit | for aligning elements vertically (pp. 188, 238) initial value: baseline; may only be applied to inline-level and table cell elements; not inherited; percentages refer to the element's line-height property |
visibility either visible, hidden, collapse, or inherit | for hiding elements without taking them out of the document's flow (p. 190) initial value: inherit, which rather makes the fact that it's not inherited a moot point |
white-space either normal, pre, nowrap, pre-wrap, pre-lined, or inherit | for specifying how white space should be treated (p. 164) initial value: normal; may only be applied to block-level elements; inherited |
widows either an integer or inherit | for specifying how many lines of an element may appear alone at the top of a page (p. 214) initial value: 2; may only be applied to block-level elements; inherited |
width either a length, percentage, auto, or inherit | for setting the width of an element (pp. 174, 232) 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 |
word-spacing either normal, a length, or inherit | for setting the distance between words (p. 162) initial value: normal; inherited |
z-index either auto, an integer, or inherit | for setting the depth of an element with respect to overlapping elements (p. 183)
initial value: auto; may only be applied to positioned elements; not inherited |