CSS Values and Units Reference
This topic defines the supported values and units for Cascading Style Sheets (CSS) text, layout, and positioning properties.
CSS Unit Table
Measurements and positions in CSS properties are indicated in length units. Windows Internet Explorer supports four types of length units: relative, absolute, angle, and time. Relative units specify a length in relation to another property, and scale better from one output device to another (such as from a monitor to a printer) and in comparison to other page elements. Absolute units specify an exact measurement, such as inches or centimeters, and are useful when you know the physical properties of the output device.
| Relative length units | |
|---|---|
| em | The computed font-size. |
| ex | The height of a lowercase "x". |
| px | Pixels, relative to the viewing device. |
| % | Percentage. |
| rem | The font size of the root element. |
| vw | The viewport width. |
| vh | The viewport height. |
| vm | The smaller value of viewport width or height. |
| ch | Zero-width (width of the zero glyph in the rendering font). |
| Absolute length units | |
| in | Inches (1 inch = 2.54 centimeters). |
| cm | Centimeters. |
| mm | Millimeters. |
| pt | Points (1 point = 1/72 inches). |
| pc | Picas (1 pica = 12 points). |
| Angle units (Windows Internet Explorer 9) | |
| deg | Degrees. |
| grad | Gradians. |
| rad | Radians. |
| turn | Turns. |
| Time units (Internet Explorer 9) | |
| ms | Milliseconds. |
| s | Seconds. |
The em unit is relative to the computed value of the font-size attribute of the element. When em occurs in the value of font-size itself, it refers to the font size of the parent element. You can use it in both vertical and horizontal measurements.
Pixel units are relative to the resolution of the viewing device. For example, a 600 dots per inch (dpi) laser printer requires more dots to achieve the same pixel density as a computer monitor.
Percentage values are always relative to another value (for example, a length). Attributes that allow percentages also define the property to which the percentage refers. For example, you can specify the width of a table cell as a percentage of the entire table.
Functions
Functional notation is used to denote colors, attributes, and Uniform Resource Identifiers (URIs) in Cascading Style Sheets, Level 3 (CSS3). Internet Explorer supports the following functions:
The attr() function
The attr(n) function returns as a string the value of attribute n for the subject of the selector. The attr(n) function is available only in Windows Internet Explorer 8 and later, can be used only with the content CSS property, and can take only one argument. The returned string is not parsed as CSS. If the subject of the selector does not have an attribute n, an empty string is returned.
The url() function
The url() function takes one URI (or URL) as an argument. The URI can be quoted with either two single quote (') or double quote (") characters. For example, following is a typical use for the url() function. In this case, the url() function designates the location of the image file to use for the background property.
body {
background: url("https://www.example.com/myimage.gif")
}
The counter() function
Counters are denoted by identifiers (see the counter-increment and counter-reset properties). To refer to the value of a counter, the notation counter(<identifier>) or counter(<identifier>, <list-style-type>) is used. The default style is decimal. The value of a counter can only be referred to from the content CSS property. For more information, see content.
The calc() function
Internet Explorer 9. The calc() function can be used wherever length values are allowed. The expression within the parentheses is computed at the same time as 'em' lengths are computed. The calc() function supports the following five arithmetic operators, plus round parentheses:
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
- Modulus (mod)
Addition and subtraction have the lowest precedence; multiplication, division, and modulus have the highest precedence. Following is an example of how to use the calc() function to calculate length values for the margin property:
p {
margin: calc(1rem - 2px) calc(1rem - 1px)
}
In this case, the calc() function calculates the top and bottom margins as two pixels less than the font size of the root element, and the left and right margins as one pixel less than the font size of the root element.
Standards Compliance
According to Cascading Style Sheets, Level 1 (CSS1), length values must specify a unit type identifier. Earlier versions of Internet Explorer enable you to use certain invalid declarations and treat numbers without any unit type identifier as pixel (px) units. When you use the !DOCTYPE declaration to specify standards-compliant mode, Microsoft Internet Explorer 6 and later versions ignore style sheet declarations that do not comply with CSS1.
Related topics
CSS Compatibility in Internet Explorer