CSS Property Reference

The index below contains an alphabetical listing of some of the more widely used CSS properties. We have only included properties that currently (as of March 2019) have full “Recommendation” status, and that apply to visual media. A full list of CSS properties, including both standard and proposed properties, can be found here. Click on an item in the table for details.



Index



background
Value:[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:Allowed on background-position
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting individual background properties at the same place in the style sheet.




background-attachment
Value:scroll | fixed | inherit
Initial:scroll
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:If a background image is specified, specifies whether it is fixed with regard to the viewport (fixed) or scrolls along with the containing block (scroll).




background-color
Value:<color> | transparent | inherit
Initial:transparent
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Sets the background colour of an element, either a <color> value or the keyword transparent, to make the underlying colours shine through.




background-image
Value:<uri> | none | inherit
Initial:None
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:Absolute URI or none
Description:Sets the background image of an element. Authors should also specify a background colour to be used when the image is unavailable. The image is rendered on top of the background colour, which will be visible in the transparent parts of the image.




background-position
Value:[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
Initial:0% 0%
Applies to:All elements
Inherited:No
Percentages:Refer to the size of the box itself
Media:Visual
Computed value:For <length> the absolute value, otherwise a percentage
Description:If a background image has been specified, this property specifies its initial position. If only one value is specified, the second value is assumed to be 'center'. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative <percentage> and <length> values are allowed. Values have the following meanings:
  • <percentage> - A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.
  • <:length>: - A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element's padding box. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box.
  • top - Equivalent to '0%' for the vertical position.
  • right - Equivalent to '100%' for the horizontal position.
  • bottom - Equivalent to '100%' for the vertical position.
  • left - Equivalent to '0%' for the horizontal position.
  • center - Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is.




background-repeat
Value:repeat | repeat-x | repeat-y | no-repeat | inherit
Initial:repeat
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:If a background image is specified, specifies whether the image is repeated (tiled), and how (all tiling covers the content, padding and border areas of a box):
  • repeat - the image is repeated both horizontally and vertically.
  • repeat-x - the image is repeated horizontally only.
  • repeat-y - the image is repeated vertically only.
  • no-repeat - the image is not repeated: only one copy of the image is drawn.




border
Value:[ <border-width> || <border-style> || <border-color> ] | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting the same width, colour, and style for all four borders of a box (cannot set different values on the four borders - to do so, one or more of the other border properties must be used).




border-bottom
Value:[ <border-bottom-width> || <border-bottom-style> || <border-bottom-color> ] | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting the width, style, and color of the bottom border of a box.




border-bottom-color
Value:<color> | transparent | inherit
Initial:The value of the 'color' property
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:When taken from the 'color' property, the computed value of 'color'; otherwise, as specified
Description:Specifies the colour of the bottom border.




border-bottom-style
Value:<border-style> | inherit
Initial:none
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Sets the style of the bottom border:
  • none - (the default) no border is drawn, and the border width is zero.
  • hidden - same as none (except in terms of border conflict resolution for table elements, which we will deal with elsewhere).
  • dotted - the border is drawn using dots.
  • dashed - the border is drawn using dashes.
  • solid - the border is drawn as a solid line.
  • double - the border is drawn as two parallel solid lines.
  • groove - the border is drawn to simulate a 3d "grooved" look (the border must have a width of at least two pixels for this setting to have any effect.
  • ridge - the border is drawn to simulate a 3d "ridged" look (the border must have a width of at least two pixels for this setting to have any effect.
  • inset - the border is drawn to simulate a 3d "sunken" look.
  • outset - the border is drawn to simulate a 3d "raised" look.




border-bottom-width
Value:<border-width> | inherit
Initial:medium
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:Absolute length; '0' if the border style is 'none' or 'hidden'
Description:Sets the width of the bottom border of a box:
  • thin - a thin border.
  • medium - a medium border.
  • thick - a thick border.
  • <length> - the border's thickness has an explicit value (negative values are not allowed).




border-collapse
Value:collapse | separate | inherit
Initial:separate
Applies to:'table' and 'inline-table' elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Selects a table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.




border-color
Value:[ <color> | transparent ]{1,4} | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:Sets the colour of the four borders.




border-left
Value:[ <border-left-width> || <border-left-style> || <border-left-color> ] | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting the width, style, and color of the left border of a box.




border-left-color
Value:<color> | transparent | inherit
Initial:The value of the 'color' property
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:When taken from the 'color' property, the computed value of 'color'; otherwise, as specified
Description:Specifies the colour of the left border.




border-left-style
Value:<border-style> | inherit
Initial:none
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Sets the style of the left border:
  • none - (the default) no border is drawn, and the border width is zero.
  • hidden - same as none (except in terms of border conflict resolution for table elements, which we will deal with elsewhere).
  • dotted - the border is drawn using dots.
  • dashed - the border is drawn using dashes.
  • solid - the border is drawn as a solid line.
  • double - the border is drawn as two parallel solid lines.
  • groove - the border is drawn to simulate a 3d "grooved" look (the border must have a width of at least two pixels for this setting to have any effect.
  • ridge - the border is drawn to simulate a 3d "ridged" look (the border must have a width of at least two pixels for this setting to have any effect.
  • inset - the border is drawn to simulate a 3d "sunken" look.
  • outset - the border is drawn to simulate a 3d "raised" look.




border-left-width
Value:<border-width> | inherit
Initial:medium
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:Absolute length; '0' if the border style is 'none' or 'hidden'
Description:Sets the width of the left border of a box:
  • thin - a thin border.
  • medium - a medium border.
  • thick - a thick border.
  • <length> - the border's thickness has an explicit value (negative values are not allowed).




border-right
Value:[ <border-right-width> || <border-right-style> || <border-right-color> ] | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting the width, style, and color of the right border of a box.




border-right-color
Value:<color> | transparent | inherit
Initial:The value of the 'color' property
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:When taken from the 'color' property, the computed value of 'color'; otherwise, as specified
Description:Specifies the colour of the right border.




border-right-style
Value:<border-style> | inherit
Initial:none
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Sets the style of the right border:
  • none - (the default) no border is drawn, and the border width is zero.
  • hidden - same as none (except in terms of border conflict resolution for table elements, which we will deal with elsewhere).
  • dotted - the border is drawn using dots.
  • dashed - the border is drawn using dashes.
  • solid - the border is drawn as a solid line.
  • double - the border is drawn as two parallel solid lines.
  • groove - the border is drawn to simulate a 3d "grooved" look (the border must have a width of at least two pixels for this setting to have any effect.
  • ridge - the border is drawn to simulate a 3d "ridged" look (the border must have a width of at least two pixels for this setting to have any effect.
  • inset - the border is drawn to simulate a 3d "sunken" look.
  • outset - the border is drawn to simulate a 3d "raised" look.




border-right-width
Value:<border-width> | inherit
Initial:medium
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:Absolute length; '0' if the border style is 'none' or 'hidden'
Description:Sets the width of the right border of a box:
  • thin - a thin border.
  • medium - a medium border.
  • thick - a thick border.
  • <length> - the border's thickness has an explicit value (negative values are not allowed).




border-spacing
Value:<length> <length>? | inherit
Initial:0
Applies to:'table' and 'inline-table' elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:Two absolute lengths
Description:The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.




border-style
Value:<border-style>{1,4} | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting 'border-top-style', 'border-right- style', 'border-bottom-style', and 'border-left-style'at the same place in the style sheet:

  • none - (the default) no border is drawn, and the border width is zero.
  • hidden - same as none (except in terms of border conflict resolution for table elements, which we will deal with elsewhere).
  • dotted - the border is drawn using dots.
  • dashed - the border is drawn using dashes.
  • solid - the border is drawn as a solid line.
  • double - the border is drawn as two parallel solid lines.
  • groove - the border is drawn to simulate a 3d "grooved" look (the border must have a width of at least two pixels for this setting to have any effect.
  • ridge - the border is drawn to simulate a 3d "ridged" look (the border must have a width of at least two pixels for this setting to have any effect.
  • inset - the border is drawn to simulate a 3d "sunken" look.
  • outset - the border is drawn to simulate a 3d "raised" look.
If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.




border-top
Value:[ <border-top-width> || <border-top-style> || <border-top-color> ] | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting the width, style, and colour of the top border of a box.




border-top-color
Value:<color> | transparent | inherit
Initial:The value of the color property
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:When taken from the color property, the computed value of color; otherwise, as specified
Description:Specifies the colour of the top border.




border-top-style
Value:<border-style> | inherit
Initial:none
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Sets the style of the top border:
  • none - (the default) no border is drawn, and the border width is zero.
  • hidden - same as none (except in terms of border conflict resolution for table elements, which we will deal with elsewhere).
  • dotted - the border is drawn using dots.
  • dashed - the border is drawn using dashes.
  • solid - the border is drawn as a solid line.
  • double - the border is drawn as two parallel solid lines.
  • groove - the border is drawn to simulate a 3d "grooved" look (the border must have a width of at least two pixels for this setting to have any effect.
  • ridge - the border is drawn to simulate a 3d "ridged" look (the border must have a width of at least two pixels for this setting to have any effect.
  • inset - the border is drawn to simulate a 3d "sunken" look.
  • outset - the border is drawn to simulate a 3d "raised" look.




border-top-width
Value:<border-width> | inherit
Initial:medium
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:Absolute length; '0' if the border style is 'none' or 'hidden'
Description:Sets the width of the top border of a box:
  • thin - a thin border.
  • medium - a medium border.
  • thick - a thick border.
  • <length> - the border's thickness has an explicit value (negative values are not allowed).




border-width
Value:<border-width>{1,4} | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.




bottom
Value:<length> | <percentage> | auto | inherit
Initial:auto
Applies to:Positioned elements
Inherited:No
Percentages:Refer to height of containing block
Media:Visual
Computed value:If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.
Description:Specifies how far an absolutely positioned box's bottom margin edge is offset above the bottom of the box's containing block. For relatively positioned boxes, the offset is with respect to the bottom edge of the box itself. Setting this property on non-positioned elements has no effect.




box-sizing
Value:content-box | border-box
Initial:content-box
Applies to:All elements that accept width or height
Inherited:No
Percentages:N/A
Media:Visual
Computed value:Specified value
Description:Specifies how the width and height of an element are calculated, i.e. whether or not they include padding and borders.




caption-side
Value:top | bottom | inherit
Initial:top
Applies to:'table-caption' elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies the position of the caption box with respect to the table box ('top' positions the caption box above the table box, 'bottom' positions the caption box below the table box).




clear
Value:none | left | right | both | inherit
Initial:none
Applies to:Block-level elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Indicates which sides of an element's box(es) may not be adjacent to an earlier floating box (does not consider floats inside the element itself or in other block formatting contexts).




color
Value:<color> | inherit
Initial:Depends on user agent
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Describes the foreground colour of an element's text content.




display
Value:inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial:inline
Applies to:All elements
Inherited:No
Percentages:N/A
Media:All
Computed value:As specified, except for positioned and floating elements
Description:Specifies the display behaviour (the type of rendering box) of an element:
  • block - generates a block-level container.
  • inline-block - generates an inline block-level container.
  • inline - generates one or more inline container.
  • list-item - generates a principal block box and a marker box.
  • none - the element and its content are not displayed.
  • table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption - these values cause an element to behave like a table element.




float
Value:left | right | none | inherit
Initial:none
Applies to:All elements (but see note in Description: re absolutely positioned elements)
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies whether a box should float to the left, right, or not at all. May be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. If a box is floated left, content flows on the right side of the box, starting at the top (subject to the 'clear' property). If a box is floated right, content flows on the left side of the box, starting at the top (again subject to the 'clear' property).




font
Value:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initial:See individual properties
Applies to:All elements
Inherited:Yes
Percentages:See individual properties
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family' at the same place in the style sheet.




font-family
Value:[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
Initial:Depends on user agent
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies a prioritized list of font family names (e.g.Arial, Helvetica, "Times New Roman", Times etc.) and/or generic family names (e.g.serif, sans-serif, monospace etc.). Values are separated by a comma to indicate that they are alternatives.




font-size
Value:<absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial:medium
Applies to:All elements
Inherited:Yes
Percentages:Refer to inherited font size
Media:Visual
Computed value:Absolute length
Description:Specifies the size of a font.




font-style
Value:normal | italic | oblique | inherit
Initial:normal
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies the font style for a text.




font-variant
Value:normal | small-caps | inherit
Initial:normal
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies whether or not a text should be displayed in a small-caps font (in the small-caps variant of a font, all lowercase letters are converted to uppercase letters, but using a smaller font size and with slightly different proportions).




font-weight
Value:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initial:normal
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:Depends on font
Description:Specifies the weight of the font. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent.




height
Value:<length> | <percentage> | auto | inherit
Initial:auto
Applies to:All elements except non-replaced inline elements, table columns, and column groups
Inherited:No
Percentages:Calculated with respect to the height of the generated box's containing block, or 'auto' if the height of the containing block is not specified explicitly and the element is not absolutely positioned.
Media:Visual
Computed value:The percentage or 'auto' (see above) or the absolute length
Description:Specifies the content height of boxes (does not apply to non-replaced inline elements).




left
Value:<length> | <percentage> | auto | inherit
Initial:auto
Applies to:Positioned elements
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'
Description:Specifies how far an absolutely positioned box's left margin edge is offset to the right of the left edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the left edge of the box itself. Setting this property on non-positioned elements has no effect.




letter-spacing
Value:normal | <length> | inherit
Initial:normal
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:'normal' or absolute length
Description:Specifies the amount of space separating text characters.




line-height
Value:normal | <number> | <length> | <percentage> | inherit
Initial:normal
Applies to:All elements
Inherited:Yes
Percentages:Refer to the font size of the element itself
Media:Visual
Computed value:For <length> and <percentage> the absolute value; otherwise as specified
Description:Specifies the height of a line of text.




list-style
Value:[ <list-style-type> || <list-style-position> || <list-style-image> ] | inherit
Initial:See individual properties
Applies to:Elements with 'display: list-item'
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:See individual properties
Description:A shorthand notation for setting the 'list-style-type', 'list-style-image', and 'list-style-position' properties at the same place in the style sheet.




list-style-image
Value:<uri> | none | inherit
Initial:none
Applies to:Elements with 'display: list-item'
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:Absolute URI or 'none'
Description:Specifies an image to be used as the list item marker in place of the marker set with the 'list-style-type' marker.




list-style-position
Value:inside | outside | inherit
Initial:outside
Applies to:Elements with 'display: list-item'
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies the position of the list-item markers (e.g. bullet points, etc.).




list-style-type
Value:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Initial:disc
Applies to:Elements with 'display: list-item'
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies the type of list-item marker used in a list:
  • decimal - decimal numbers, beginning with 1.
  • decimal-leading-zero - decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
  • lower-roman - lowercase roman numerals (i, ii, iii, iv, v, etc.).
  • upper-roman - uppercase roman numerals (I, II, III, IV, V, etc.).
  • georgian - traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
  • armenian - traditional uppercase Armenian numbering.
  • lower-latin (or lower-alpha) - lowercase ascii letters (a, b, c, ... z).
  • upper-latin (or upper-alpha) - uppercase ascii letters (A, B, C, ... Z).
  • lower-greek - lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...).




margin
Value:<margin-width>{1,4} | inherit
Initial:See individual properties
Applies to:All elements except elements with table display types other than table-caption, table and inline-table
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.




margin-bottom
Value:<margin-width> | inherit
Initial:0
Applies to:All elements except elements with table display types other than table-caption, table and inline-table
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the bottom margin.




margin-left
Value:<margin-width> | inherit
Initial:0
Applies to:All elements except elements with table display types other than table-caption, table and inline-table
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the left-hand margin.




margin-right
Value:<margin-width> | inherit
Initial:0
Applies to:All elements except elements with table display types other than table-caption, table and inline-table
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the right-hand margin.




margin-top
Value:<margin-width> | inherit
Initial:0
Applies to:All elements except elements with table display types other than table-caption, table and inline-table
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the top margin.




max-height
Value:<length> | <percentage> | none | inherit
Initial:none
Applies to:All elements but non-replaced inline elements, table columns, and column groups
Inherited:No
Percentages:Calculated with respect to the height of the containing block; if the height of the containing block is not specified explicitly and this element is not absolutely positioned, the percentage value is treated as 'none'
Media:Visual
Computed value:The percentage as specified or the absolute length or 'none'
Description:Used to specify the maximum height of a box. Negative values are not allowed.




max-width
Value:<length> | <percentage> | none | inherit
Initial:none
Applies to:All elements but non-replaced inline elements, table rows, and row groups
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length or 'none'
Description:Used to specify the maximum width of a box. Negative values are not allowed.




min-height
Value:<length> | <percentage> | none | inherit
Initial:none
Applies to:All elements but non-replaced inline elements, table columns, and column groups
Inherited:No
Percentages:Calculated with respect to the height of the containing block; if the height of the containing block is not specified explicitly and this element is not absolutely positioned, the percentage value is treated as '0'
Media:Visual
Computed value:The percentage as specified or the absolute length or 'none'
Description:Used to specify the minimum height of a box. Negative values are not allowed.




min-width
Value:<length> | <percentage> | none | inherit
Initial:none
Applies to:All elements but non-replaced inline elements, table rows, and row groups
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length or 'none'
Description:Used to specify the minimum width of a box. Negative values are not allowed.




opacity
Value:<alphavalue> | inherit
Initial:1
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:The same as the specified value after clipping the <alphavalue> to the range [0.0,1.0]
Description:Sets the degree of opacity for an element.




outline
Value:[ <outline-color> || <outline-style> || <outline-width> ] | inherit
Initial:See individual properties
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual, interactive
Computed value:See individual properties
Description:A shorthand property for specifying 'outline-width', 'outline-style' (required), and 'outline-color' at the same place in the style sheet (an outline is a line drawn around an element outside its borders to make it stand out). If outline-color is omitted, the colour of the text is used.




outline-color
Value:<color> | invert | inherit
Initial:invert
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual, interactive
Computed value:As specified
Description:Specifies the colour of an outline (an outline is a line drawn around an element outside its borders to make it stand out).




outline-offset
Value:<length>
Initial:0
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:<length> value in absolute units (px or physical)
Description:Specifies the amount of space between an outline (an outline is a line drawn around an element outside its borders to make it stand out) and the edge or border of an element. The space between an element and its outline is transparent.




outline-style
Value:<border-style> | inherit
Initial:none
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual, interactive
Computed value:As specified
Description:Specifies the style of an outline (an outline is a line drawn around an element outside its borders to make it stand out):
  • none - (the default) no outline is drawn, and the outline width is zero.
  • hidden - same as none.
  • dotted - the outline is drawn using dots.
  • dashed - the outline is drawn using dashes.
  • solid - the outline is drawn as a solid line.
  • double - the outline is drawn as two parallel solid lines.
  • groove - the outline is drawn to simulate a 3d "grooved" look (the outline must have a width of at least two pixels for this setting to have any effect.
  • ridge - the outline is drawn to simulate a 3d "ridged" look (the outline must have a width of at least two pixels for this setting to have any effect.
  • inset - the outline is drawn to simulate a 3d "sunken" look.
  • outset - the outline is drawn to simulate a 3d "raised" look.




outline-width
Value:<border-width> | inherit
Initial:medium
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual, interactive
Computed value:Absolute length; '0' if the outline style is 'none'
Description:Specifies the width of an outline (an outline is a line drawn around an element outside its borders to make it stand out):
  • thin - a thin outline.
  • medium - a medium outline.
  • thick - a thick outline.
  • <length> - the outline's thickness has an explicit value (negative values are not allowed).




overflow
Value:visible | hidden | scroll | auto | inherit
Initial:visible
Applies to:Block containers
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies what should happen if content overflows an element's box, i.e. whether or not to clip content, or to add scrollbars when an element's content is too big to fit within the element's box (only works for block elements with a specified height):
  • visible - content is not clipped (it may be rendered outside the box)
  • hidden - content is clipped and that no scrollbar is provided
  • scroll - content is clipped and a scroll bar is provided regardless of whether or not content is clipped
  • auto - a scrollbar is provided if content is clipped




padding
Value:<padding-width>{1,4} | inherit
Initial:See individual properties
Applies to:All elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:See individual properties
Description:A shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.




padding-bottom
Value:<padding-width> | inherit
Initial:0
Applies to:All elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the bottom padding.




padding-left
Value:<padding-width> | inherit
Initial:0
Applies to:All elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the left-hand padding.




padding-right
Value:<padding-width> | inherit
Initial:0
Applies to:All elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the right-hand padding.




padding-top
Value:<padding-width> | inherit
Initial:0
Applies to:All elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the width of the top padding.




page-break-after
Value:auto | always | avoid | left | right | inherit
Initial:auto
Applies to:block-level elements (but not absolutely positioned elements)
Inherited:No
Percentages:N/A
Media:Visual, paged
Computed value:As specified
Description:Adds a page-break after a specified element (together with 'page-break-before' and 'page-break-inside', helps to define how a document should behave when printed).




page-break-before
Value:auto | always | avoid | left | right | inherit
Initial:auto
Applies to:block-level elements (but not absolutely positioned elements)
Inherited:No
Percentages:N/A
Media:Visual, paged
Computed value:As specified
Description:Adds a page-break before a specified element (together with 'page-break-after' and 'page-break-inside', helps to define how a document should behave when printed).




page-break-inside
Value:auto | avoid | inherit
Initial:auto
Applies to:block-level elements (but not absolutely positioned elements)
Inherited:No
Percentages:N/A
Media:Visual, paged
Computed value:As specified
Description:Specifies whether a page-break should be avoided inside a specified element (together with 'page-break-before' and 'page-break-after', helps to define how a document should behave when printed).




position
Value:static | relative | absolute | fixed | inherit
Initial:static
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies the positioning method used for an element:
  • static - element is rendered according to the position in which it appears in the HTML document (the default)
  • absolute - element is positioned relative to its first positioned (non-static) ancestor element
  • fixed - element is positioned relative to the browser window
  • relative - element is positioned relative to its normal position








text-align
Value:left | right | center | justify | inherit
Initial:left if text direction is left-to-right, right if text direction is right-to-left
Applies to:Block containers
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:The initial value or as specified
Description:Specifies the horizontal alignment of text in an element.




text-decoration
Value:none | [ underline || overline || line-through || blink ] | inherit
Initial:none
Applies to:All elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies the decoration added to text, using the element's colour. Values have the following meanings:
  • none - no text decoration.
  • underline - text is underlined.
  • overline - text is overlined.
  • line-through - text has a line through it.
  • blink - text blinks (alternates between visible and invisible).




text-indent
Value:<length> | <percentage> | inherit
Initial:0
Applies to:Block containers
Inherited:Yes
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage as specified or the absolute length
Description:Specifies the indentation of the first line of text in a block container.




text-transform
Value:capitalize | uppercase | lowercase | none | inherit
Initial:none
Applies to:All elements
Inherited:Yes
Percentages:As specified
Media:Visual
Computed value:As specified
Description:Controls capitalisation effects of an element's text:
  • capitalize - first character of each word is uppercase
  • uppercase - all characters of each word are uppercase
  • lowercase - all characters of each word are lowercase
  • none - no capitalisation effects




top
Value:<length> | <percentage> | auto | inherit
Initial:auto
Applies to:Positioned elements
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'
Description:Specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edge of the box itself. Setting this property on non-positioned elements has no effect.




vertical-align
Value:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:baseline
Applies to:Inline-level and 'table-cell' elements
Inherited:No
Percentages:Refer to the 'line-height' of the element itself
Media:Visual
Computed value:For <percentage> and <length> the absolute length, otherwise as specified
Description:Specifies the vertical alignment of an element (note that values have different meanings in the context of tables):
  • baseline - element is aligned with the baseline of the parent (the default).
  • <length> - raises or lowers an element by the specified length (negative values are allowed).
  • % - raises or lowers an element in a percent of the "line-height" property (negative values are allowed).
  • sub - element is aligned with the subscript baseline of the parent.
  • super - element is aligned with the superscript baseline of the parent.
  • top - element is aligned with the top of the tallest element on the line.
  • text-top - element is aligned with the top of the parent element's font.
  • middle - element is placed in the middle of the parent element.
  • bottom - element is aligned with the lowest element on the line.
  • text-bottom - element is aligned with the bottom of the parent element's font.




visibility
Value:visible | hidden | collapse | inherit
Initial:visible
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies whether or not an element is visible (invisible boxes still affect layout):
  • visible - element is visible.
  • hidden - element is invisible, but still affects layout. Descendants of the element will be visible if they have 'visibility: visible'.
  • collapse - same as hidden (unless used on table rows, table row groups, table columns, or table column groups).




white-space
Value:normal | pre | nowrap | pre-wrap | pre-line | inherit
Initial:normal
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies how white space inside an element is handled:
  • normal - sequences of whitespace collapse into a single whitespace, and text will wrap when necessary (the default)
  • pre - white space is preserved, and text only wraps on a line-break
  • nowrap - sequences of whitespace collapse into a single whitespace, and text will never wrap to the next line unless a <br> tag is encountered
  • pre-wrap - white space is preserved, text wraps where necessary or on a line-break
  • pre-line - sequences of whitespace collapse into a single whitespace, text wraps where necessary or on a line-break




width
Value:<length> | <percentage> | auto | inherit
Initial:auto
Applies to:All elements except non-replaced inline elements, table rows, and row groups
Inherited:No
Percentages:Refer to width of containing block
Media:Visual
Computed value:The percentage or 'auto' as specified or the absolute length
Description:Specifies the content width of boxes (does not apply to non-replaced inline elements).




word-spacing
Value:normal | <length> | inherit
Initial:normal
Applies to:All elements
Inherited:Yes
Percentages:N/A
Media:Visual
Computed value:For 'normal' the value '0'; otherwise the absolute length
Description:Specifies the amount of space separating words.




z-index
Value:auto | <integer> | inherit
Initial:auto
Applies to:Positioned elements
Inherited:No
Percentages:N/A
Media:Visual
Computed value:As specified
Description:Specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order (only works on positioned elements).