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

align-content

Value:	flex-start | flex-end | center | space-between | space-around | stretch
Initial:	stretch
Applies to:	Multi-line flex containers
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified keyword
Description:	Aligns a flex container's lines within the flex container when there is extra space in the cross-axis (has no effect on a single-line flex container). Values have the following meanings: flex-start - lines are packed toward the cross start edge of the flex container. flex-end - lines are packed toward the cross end edge of the flex container. center - lines are packed in the centre of the flex container. Any unused space is distributed so that the space between each end of the flex container and the line nearest to it is the same. space-between - lines are evenly distributed on the cross axis. The first and last lines will be flush with the cross start and cross end edges of the flex container respectively, and any free space on the cross axis is distributed so that the space between any two adjacent lines is the same. space-around - lines are evenly distributed on the cross axis. Any free space on the cross axis is distributed so that the space between any two adjacent lines is the same, with half that amount of space between the first and last lines edges of the container. stretch - lines stretch to take up the available space on the cross axis (the default value).

align-items

Value:	flex-start | flex-end | center | baseline | stretch
Initial:	stretch
Applies to:	Flex containers
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified keyword
Description:	Sets the default cross axis alignment for all flex items in a flex container. Values have the following meanings: flex-start - flex items are positioned at the main start edge of the flex container. flex-end - flex items are positioned at the main end edge of the flex container. center - flex items are positioned in the centre of the flex container. baseline - participating* flex items are positioned in the flex container so that their baselines align (the participating flex item with the largest distance between its baseline and its cross-start edge is placed flush with the cross-start edge of the flex container). stretch - flex items are stretched to fill the available space on the main axis of the flex container (the default value). * Flex items that have had their align-self property set to a value other than "baseline" will not participate in baseline alignment.

align-self

Value:	auto | flex-start | flex-end | center | baseline | stretch
Initial:	auto
Applies to:	Flex items
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified keyword
Description:	Allows the default cross axis alignment to be overridden for an individual flex item. Values have the following meanings: auto - inherits its value from the align-items property of the parent container (the default value). flex-start - the flex item is positioned at the cross start edge of the flex container. flex-end - the flex item is positioned at the cross end edge of the flex container. center - the flex item is positioned in the centre of the flex container. baseline - the flex item and other participating* flex items are positioned in the flex container so that their baselines align (the participating flex item with the largest distance between its baseline and its cross-start edge is placed flush with the cross-start edge of the flex container). stretch - the flex item is stretched to fit the container. * Flex items that have their align-self property set to a value other than "baseline", or that do not have their align-self property set and belong to a flex container that has its align-items property set to a value other than "baseline".

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-width> || <border-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). 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. ridge - the border is drawn to simulate a 3d "ridged" look. inset - the border is drawn to simulate a 3d "sunken" look. outset - the border is drawn to simulate a 3d "raised" look. Note that, for the 'groove', 'ridge', 'inset' or 'outset' styles to have any effect, the border must have a width of at least two pixels. Similarly, the 'double' style will produce a solid border if the border width is less than three pixels. The default width for these styles is (usually) three pixels.

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-width> || <border-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). 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-width> || <border-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). 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). 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-width> || <border-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). 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.

flex

Value:	none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Initial:	0 1 auto
Applies to:	Flex items
Inherited:	No
Percentages:	See individual properties
Media:	Visual
Computed value:	See individual properties
Description:	A shorthand property that sets the components of a flexible length: <'flex-grow'> is a number that sets the value of the flex-grow property that specifies the flex grow factor (i.e. how much the item will grow relative to the rest of the flex items in the flex container when positive free space is distributed). When omitted it is set to "1". <'flex-shrink'> is a number that sets the value of the flex-shrink property that specifies the flex shrink factor (i.e. how much the item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed). When omitted it is set to "1". <'flex-basis'> sets the value of the flex-basis property that specifies the initial main size of the flex item before free space is distributed according to the flex factors. It accepts the same values as the width and height properties (except that auto is treated differently), plus the content keyword: auto - sets the value of flex-basis to the length of the flex item if a length has been specified, or to to a value based on the flex item's content if no value has been specified (if the specified value is itself auto, then the used value is content). content - sets the value of flex-basis to a value based on the flex item's content. If <'flex-basis'> is omitted, its value is set to "0". The flex property can also take the following keyword values: auto - same as "1 1 auto" initial - same as "0 1 auto" none - same as "0 0 auto"

flex-basis

Value:	content | <'width'>
Initial:	auto
Applies to:	Flex items
Inherited:	No
Percentages:	Relative to the flex container's inner main size
Media:	Visual
Computed value:	Specified keyword or a computed <length-percentage> value
Description:	Sets the flex basis (the initial main size of the flex item). It accepts the same values as the width and height property, plus content. Note: W3C recommends that authors control flexibility using the flex shorthand property rather than with flex-basis directly.

flex-direction

Value:	row | row-reverse | column | column-reverse
Initial:	row
Applies to:	Flex containers
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified keyword
Description:	Specifies how flex items are placed in the flex container (i.e. the direction in which flex items are laid out) by setting the direction of the flex container's main axis. The flex-direction property can take the following values: row - the flex items are displayed horizontally, as a row (the default value) row-reverse - same as row, except the order in which the flex items are displayed is reversed. column - the flex items are displayed vertically, as a column. column-reverse - same as column, except the order in which the flex items are displayed is reversed.

flex-flow

Value:	<'flex-direction'> || <'flex-wrap'>
Initial:	See individual properties
Applies to:	Flex containers
Inherited:	See individual properties
Percentages:	See individual properties
Media:	Visual
Computed value:	See individual properties
Description:	A shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes.

flex-grow

Value:	<number>
Initial:	0
Applies to:	Flex items
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified number
Description:	Sets the flex grow factor to <number>. Negative numbers are invalid. Note: W3C recommends that authors control flexibility using the flex shorthand property rather than with flex-grow directly.

flex-shrink

Value:	<number>
Initial:	1
Applies to:	Flex items
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified number
Description:	Sets the flex shrink factor to <number>. Negative numbers are invalid. Note: W3C recommends that authors control flexibility using the flex shorthand property rather than with flex-shrink directly.

flex-wrap

Value:	nowrap | wrap | wrap-reverse
Initial:	nowrap
Applies to:	Flex containers
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified keyword
Description:	Controls whether the flex container is single-line or multi-line, and the direction in which new lines are stacked (i.e. the direction of the cross-axis). The flex-wrap property can take the following values: nowrap - specifies that flex items will not wrap (the default value). wrap - specifies that flex items will wrap if necessary. wrap-reverse - specifies that the flexible items will wrap if necessary, but in the reverse order.

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.The following values refer to system fonts: caption - the font used for captioned controls (e.g., buttons, drop-downs, etc.). icon - the font used to label icons. menu - the font used in menus (e.g., dropdown menus and menu lists). message-box - the font used in dialog boxes. small-caption - the font used for labeling small controls. status-bar - the font used in window status bars. System fonts may only be set as a whole; the font family, size, weight, style, etc. are all set at the same time (these values can be changed individually if required). If a font with the indicated characteristics does not exist on a given platform, the user agent should substitute an appropriate font or a user agent default font.

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).

justify-content

Value:	flex-start | flex-end | center | space-between | space-around
Initial:	flex-start
Applies to:	Flex containers
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified keyword
Description:	Specifies how flex items will be aligned along the main axis of the current line of the flex container if there is any free space on the main axis (i.e. if the flex items do not take up all available space on the main-axis). The justify-content property takes the following values: flex-start - flex items are packed toward the main start edge of the flex container (the default value). flex-end - flex items are packed toward the main end edge of the flex container. center - flex items are packed in the centre of the flex container. Any unused space is distributed so that the space between each end of the flex container and the flex items is the same. space-between - flex items are evenly distributed on the main axis. The first and last flex item on a line will be flush with the main start and main end edges of the flex container respectively, and any free space on the main axis is distributed so that the space between any two adjacent flex items is the same. space-around - flex items are evenly distributed on the main axis. Any free space on the main axis is distributed so that the space between any two adjacent flex items is the same, with half that amount of space between the flex items at either end and the edges of the container.

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 appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed. The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems. Glyphs are specified with 'disc', 'circle', and 'square'. Their exact rendering depends on the user agent. Numbering systems are specified with: 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.

order

Value:	<integer>
Initial:	0
Applies to:	Flex items
Inherited:	No
Percentages:	N/A
Media:	Visual
Computed value:	Specified integer
Description:	Controls the order in which flex items appear within the flex container by assigning them to ordinal groups. The <integer> value specifies which ordinal group the flex item belongs to. Flex items appear within the flex container in order-modified document order, starting with the lowest numbered group and proceeding in ascending numerical order. Items within the same ordinal group appear in the same order that they do in the source document.

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

right

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 right margin edge is offset to the left of the right edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the right edge of the box itself. Setting this property on non-positioned elements has no effect.

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).