CSS Style Properties

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

CSS Style Properties

Units in Property Values

npx - n pixels
nin - n inches
ncm - n centimeters
nmm - n millimeters
nn% - nn percent
npt - n points (1/72 inch)
npc - n pica characters (12 points)
nem - n times "m" width
nex - n times "x" height

HTML Colors

HTML Color Names and Color Codes in Property Values

These are the color names and other property values for the sixteen standard HTML colors. For other colors, use the HTML Color Picker.

Color Name	Hex Color Code	Red / Green / Blue / Alpha	Hue / Saturation / Luminance / Alpha
`aqua`	`#00ffff`	`rgba(0, 255, 255, 1.0)`	`hsla(180, 100%, 50%, 1.00)`
`black`	`#000000`	`rgba(0, 0, 0, 1.0)`	`hsla(0, 0%, 0%, 1.00)`
`blue`	`#0000ff`	`rgba(0, 0, 255, 1.0)`	`hsla(240, 100%, 50%, 1.00)`
`fuchsia`	`#ff00ff`	`rgba(255, 0, 255, 1.0)`	`hsla(300, 100%, 50%, 1.00)`
`gray` or `grey`	`#808080`	`rgba(128, 128, 128, 1.0)`	`hsla(0, 0%, 50%, 1.00)`
`green`	`#008000`	`rgba(0, 128, 0, 1.0)`	`hsla(120, 100%, 25%, 1.00)`
`lime`	`#00ff00`	`rgba(0, 255, 0, 1.0)`	`hsla(120, 100%, 50%, 1.00)`
`maroon`	`#800000`	`rgba(128, 0, 0, 1.0)`	`hsla(0, 100%, 25%, 1.00)`
`navy`	`#000080`	`rgba(0, 0, 128, 1.0)`	`hsla(240, 100%, 25%, 1.00)`
`olive`	`#808000`	`rgba(128, 128, 0, 1.0)`	`hsla(60, 100%, 25%, 1.00)`
`purple`	`#800080`	`rgba(128, 0, 128, 1.0)`	`hsla(300, 100%, 25%, 1.00)`
`red`	`#ff0000`	`rgba(255, 0, 0, 1.0)`	`hsla(0, 100%, 50%, 1.00)`
`silver`	`#c0c0c0`	`rgba(192, 192, 192, 1.0)`	`hsla(0, 0%, 75%, 1.00)`
`teal`	`#008080`	`rgba(0, 128, 128, 1.0)`	`hsla(180, 100%, 25%, 1.00)`
`white`	`#ffffff`	`rgba(255, 255, 255, 1.0)`	`hsla(0, 0%, 100%, 1.00)`
`yellow`	`#ffff00`	`rgba(255, 255, 0, 1.0)`	`hsla(60, 100%, 50%, 1.00)`

Note that, as shown above, the alpha value must be specified as a decimal number (ex: 1.00), not a percentage (100%).

Background Properties

background: <#color#> url('<#/path/image-name.ext#>') <#repeat#> <#attachment#> <#x-position#> <#y-position#>;: The background property is a shorthand for specifying background-color, background-image, background-repeat, background-attachment and background-position, in that order.
background-color: <#color#>;: Use the HTML Color Picker for an easy way to choose HTML colors.
background-image: background-image: url('<#/path/image-name.ext#>');; background-image: none;; background-image: inherit;
background-repeat: background-repeat: repeat;; background-repeat: repeat-x;; background-repeat: repeat-y;; background-repeat: no-repeat;; background-repeat: inherit;
background-attachment: background-attachment: scroll;; background-attachment: fixed;; background-attachment: inherit;
background-position: background-position: <#x-position#> <#y-position#>; background-position: inherit;

Border Properties

A border may be specified around an element or one each side individually. Any margin spacing appears outside the border while any padding appears inside the border.

border: <#width#> <#style#> <#color#>;: The border property is a shorthand for specifying border-width, border-style and border-color
border-top: <#width#> <#style#> <#color#>;: The border-top property is a shorthand for specifying border-width-top, border-style-top and border-color-top
border-right: <#width#> <#style#> <#color#>;: The border-right property is a shorthand for specifying border-width-right, border-style-right and border-color-right
border-bottom: <#width#> <#style#> <#color#>;: The border-bottom property is a shorthand for specifying border-width-bottom, border-style-bottom and border-color-bottom
border-left: <#width#> <#style#> <#color#>;: The border-left property is a shorthand for specifying border-width-left, border-style-left and border-color-left
border-width: border-width: medium; (default); border-width: thin;; border-width: thick;; border-width: nunits;; border-width: inherit;; Note that Firefox includes the border width in the height while Safari and Chrome add the border width to the height.
border-style: border-style: <#style#>;; border-style: <#top/bottom#> <#right/left#>;; border-style: <#top#> <#right/left#> <#bottom#>;; border-style: <#top#> <#right#> <#bottom#> <#left#>;; See the <div> tag tutorial and <div> tag examples for various examples of border styles
border-color: <#color#>;: Use the HTML Color Picker for an easy way to choose HTML colors.

Cursor Properties

cursor: cursor: auto
cursor: default
cursor: crosshair
cursor: help
cursor: move
cursor: pointer
cursor: progress
cursor: text
cursor: wait
cursor: n-resizse
cursor: ne-resize
cursor: nw-resize
cursor: s-resize
cursor: se-resize
cursor: sw-resize
cursor: e-resize
cursor: w-resize
cursor: url - list of URLs separated by commas; include one of the named cursors at the end of the list for browsers that do not support custom cursors

Foreground Color Properties

color: see HTML Colors above for some of the possible ways to code HTML color values

Float, Display and Visibility Properties

clear
display: display: block; - an element with this style will be separated from content outside the element by line breaks
display: compact;
display: inline; - an element with this style will appear inline with other phrasing content
display: inline-block; - an element with this style will have the width, height, margin, padding and other properties of a block but will appear inline with other phrasing content
display: list-item; - the display style of an li element; can be used to override the behavior of another element type to make it look and act like a list item
display: marker; - a box with additional space will be allocated outside the main block in an inline manner, where a marker such as a list item bullet can be placed, possibly using the :before and/or :after pseudo element selectors
display: inherit; - the value of the display property will be inherited from its parent, regardless of any value selected for the element from a style sheet or inline style
display: inline-table; - an element with this style will look and act like a table, except that it will appear inline with other phrasing content
display: none; - an element with this style and its contents will not be displayed and furthermore will not affect the page layout, as if the element effectively did not exist
display: run-in;
display: table; - the display style of a table element; can be used to override the behavior of another element type to make it look and act like a table
display: table-caption; - the display style of a caption element; can be used to override the behavior of another element type to make it look and act like a table caption
display: table-cell; - the display style of a td element; can be used to override the behavior of another element type to make it look and act like a table cell
display: table-column; - the display style of a col element; can be used to override the behavior of another element type to make it look and act like a table column
display: table-column-group; - the display style of a colgroup element; can be used to override the behavior of another element type to make it look and act like a table column group
display: table-header-group; - the display style of a thead element; can be used to override the behavior of another element type to make it look and act like a table header
display: table-footer-group; - the display style of a tfoot element; can be used to override the behavior of another element type to make it look and act like a table footer
display: table-row; - the display style of a tr element; can be used to override the behavior of another element type to make it look and act like a table row
display: table-row-group; - the display style of a tbody element; can be used to override the behavior of another element type to make it look and act like rows in a table body
float
overflow
overflow-style: See also marquee styles
position: position: absolute;
position: fixed;
position: relative;
visibility: visibility: collapse;
visibility: hidden;
visibility: inherit;
visibility: visible;
z-index: Specifies the depth or level of the element and its contents relative to its parent element. Lower z-index values, including negative numbers, represent lower (deeper) layers and higher z-index values represent higher layers, almost like laying sheets of paper one on top of another. Also requires specifying an explicit position property (position: relative, position: absolute or position: fixed).

Font Properties

font-famliy
font-size
font-weight

Margin Spacing Properties

margin: margin: <#width#>;
margin: <#top/bottom#> <#right/left#>;
margin: <#top#> <#right/left#> <#bottom#>;
margin: <#top#> <#right#> <#bottom#> <#left#>;
margin-top: <#width#>;
margin-right: <#width#>;
margin-bottom: <#width#>;
margin-left: <#width#>;

opacity

Padding Properties

padding: padding: <#width#>;
padding: <#top/bottom#> <#right/left#>;
padding: <#top#> <#right#> <#bottom#> <#left#>;
padding-top: <#width#>;
padding-right: <#width#>;
padding-bottom: <#width#>;
padding-left: <#width#>;

Size Properties

line-height
height
width

Text Properties

text-align: left
text-align: center
text-align: right
text-align: justify
text-align: start
text-align: end
text-align: match-parent
text-align: "char": align table cells at the character char, for example text-align: "." aligns numbers in table cells based on the position of their decimal point
text-decoration
vertical-align: baseline: (default)
vertical-align: bottom
vertical-align: inherit
vertical-align: middle
vertical-align: sub
vertical-align: super
vertical-align: text-bottom
vertical-align: text-top
vertical-align: top
vertical-align: height: A positive value raises the content above the baseline while a negative value lowers it below the baseline. If the value is a percentage, the height is that percentage of the line-height.

Text Wrapping and White Space Handling Properties

white-space

white-space: normal

equivalent to white-space-collapsing: collapse; text-wrap: normal:

Any sequence of multiple consecutive spaces and other whitespace is collapsed and treated as a single space.
Line breaks (new lines) and tabs are treated as any other whitespace.
Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.

white-space: nowrap

equivalent to white-space-collapsing: collapse; text-wrap: none; should be used instead of the <nobr> tag (deprecated):

Any sequence of multiple consecutive spaces and other whitespace is collapsed and treated as a single space.
Line breaks (new lines) and tabs are treated as any other whitespace.
Content only appears on a new line where line breaks occur in the HTML source.

white-space: pre

equivalent to white-space-collapsing: preserve; text-wrap: none:

Sequences of whitespace including line breaks (new lines) and tabs are preserved.
Content only appears on a new line where line breaks occur in the HTML source.
White space characters indenting HTML code or text at the beginning of a line are preserved like any other white space.

white-space: pre-line

equivalent to white-space-collapsing: preserve-breaks; text-wrap: normal:

Line breaks (new lines) are preserved.
Any white space characters indenting HTML code or text at the beginning of a line, which would normally be collapsed with the preceding new line character, are ignored.
Any other sequence of multiple consecutive spaces and other whitespace (excluding line breaks mentioned above) is collapsed and treated as a single space.
Tabs are treated as whitespace.
Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.

white-space: pre-wrap

equivalent to white-space-collapsing: preserve; text-wrap: normal:

Sequences of whitespace including line breaks (new lines) and tabs are preserved.
Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.
White space characters indenting HTML code or text at the beginning of a line are preserved like any other white space.

Select which white-space property to use

White Space Handling		text-wrap	use CSS style
New Lines, Spaces & Tabs		text-wrap	use CSS style
collapse		normal (wrap)	white-space: normal
collapse		not wrapped	white-space: nowrap
preserve		not wrapped	white-space: pre
preserve		normal (wrap)	white-space: pre-wrap
New Lines	Spaces & Tabs	text-wrap	use CSS style
preserve	collapse	normal (wrap)	white-space: pre-line
preserve	collapse	not wrapped	white-space-collapsing: preserve-breaks; text-wrap: no
(not recommended)			white-space-collapsing: preserve-breaks; text-wrap: no

word-wrap: normal
word-wrap: break-word

Some browsers do not support the white-space-collapsing property or text-wrap property (below). Therefore, to control text wrapping the use of the white-space property (above) is recommended unless a specific capability, such as decimal point alignment, is required.

text-wrap: normal

Content will automatically wrap onto additional lines as necessary based on the limitations of the available space. Wrapping will usually occur where breakable white space occurs in the HTML code.

text-wrap: none

Content from one line of the source will not wrap onto additional lines.

text-wrap: suppress

Like text-wrap: none, the text will start on a new line if it all cannot fit on the current line. But it will wrap onto additional lines if it does not fit on a single line.

text-wrap: unrestricted

Content can wrap onto additional lines between any two characters, even in the middle of a word, based on the limitations of the available space.

white-space-collapsing: collapse

Any sequence of multiple consecutive spaces and other whitespace is collapsed and treated as a single space.
Line breaks (new lines) and tabs are treated as any other whitespace.
Any white space characters indenting HTML code or text at the beginning of a line are ignored.

white-space-collapsing: discard

Any sequence of white space characters is treated as a single Unicode zero-width non-joiner (‌). This might be used to keep the letters of an acronym (initialism) separate, in a language where ligatures combining adjacent characters are common.

white-space-collapsing: trim-inner

Any leading or trailing white space in a block is ignored.

white-space-collapsing: preserve

All white space is preserved, including any white space characters indenting HTML code or text at the beginning of a line.

white-space-collapsing: preserve trim-inner

In addition to white-space-collapsing: preserve processing, any leading or trailing white space in a block is ignored.

white-space-collapsing: preserve-breaks

Line breaks (new lines) are preserved. Content only appears on a new line where line breaks occur in the HTML source.
Any white space characters indenting HTML code or text at the beginning of a line, which would normally be collapsed with the preceding new line character, are ignored.
Any other sequence of multiple consecutive spaces and other whitespace (excluding line breaks mentioned above) is collapsed and treated as a single space.
Tabs are treated as whitespace.

white-space-collapsing: preserve-breaks trim-inner

In addition to white-space-collapsing: preserve-breaks processing, any leading or trailing white space in a block is ignored.

Valid HTML 5