Many of the property values are keywords unique to that property. But for some properties, the values can include length, frequency or time values or units. In this article we go over all the math type units that can be applied as property values in CSS.
CSS Length Values
In terms of lengths, there are both relative and absolute lengths. Here is a quick summary of all of the length value types
unit | meaning |
em | relative to the font size of the parent element. |
ex | relative to the height of the lowercase ‘x’ |
gd | used in East Asian typography, not relevant to us |
rem | relative to the root font size |
vw | relative to the viewport width: the viewport width is 100vw |
vh | relative to the viewport height: the viewport height is 100vh |
vm | relative to viewport width or height, whichever is smaller |
ch | relative to the size of the 0 (zero) |
px | relative the screen resolution not the viewport size, : generally 1point, or 1/72 or an inch. |
in | an inch |
cm | a centimeter |
mm | millimeter |
pt | point is 1/72 of an inch |
pc | pica, or 1/12 of a point |
% | relative to the parent element, it’s normally defined self or other element defined by the property. |
The most common value types in CSS include pixels and percents.
Pixels can be considered both a relative and absolute. Pixels are a relative measurement because the measurement is based on the screen resolution of the monitor or screen, rather than the viewport size. However, pixels are also an absolute size because lengths given in pixels are immutable: they can only be increased via zoom features.
Images, such as jpeg photos and gifs have an absolute width and height, defined in pixels. Increasing or decreasing the size of these image types with CSS or via the width and height attributes of the image tag distort the image.
Angles, Times and Frequencies:
With some of the new CSS3, such as transforms and animations, length units do not suffice. We also need to learn and understand angles, times and frequencies. These measurements have been around and used in aural style sheets, but now with browser support for transitions, transforms and animations, angles and times have become relevant to the screen as well. The units of angles, times and frequencies are shown and described in greater detail below.
unit | meaning |
deg | degrees |
grad | grads |
rad | radians |
turn | turns |
ms | milliseconds |
s | seconds |
Hz | Hertz |
kHz | kilohertz |
Originally, all of the above units, frequencies and times, other than the new ‘turn’ unit, were introduced as aural values. The units used for aural style sheets are angles, specified in rad (radians), deg (degrees), or grad (gradians). Frequencies are specified in Hz (Hertz) or kHz (kilohertz).
Times are specified in ms (milliseconds), or s (seconds). The default unit for all of the length, angle, time and frequency values is zero, and all the values are interpreted as floats.
CSS Angle Measurement
Angle measurement types include degrees, grads, rads and turns.
Degrees
Degrees range from 0 to 360deg, with those two being equal. Positive degrees go clockwise, negative degrees go counter clock wise. For example, -90deg is one quarter of the way around counter clock-wise, turning it on its left side. 90deg will turn it clockwise 90 degrees.
The CSS for the the image below reads (in part):
.image1, image5 { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .image2, image4 { -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); }
Grads
A grad, or gradian, is equivalent to 1⁄400 of a full circle. Similar to degrees, a positive grad value will go clockwise, a negative value goes counter clockwise 100grad will be at a 90% angle. (see figure 4.4)
Rads
A rad, or radian, is equal to 180/π degrees, or about 57.3 degrees. An angle of 1 radian on a circumference of a circle creates an arc with an equal length to the radius of the circle. 1.570796326794897rad is the same value as 100grad and as 90deg.
90deg is the same as 100grad is the same as 1.508rad
Turns
Turns, are new in CSS3, and mean a rotation. One turn is equal to 360deg. For example, 2turn = 720deg. Note that turn is singular, and there is no space between the number and its unit..
rotate(900deg) is equivalent to rotate(2.5turn)
Times
Time units are much easier to explain than grads! There are two units of measurement: seconds (ms) and milliseconds (s). There are 1,000 milliseconds in a second. The format of a time value is a number followed by ‘s’ for seconds or ‘ms’ for milliseconds.
0.5s = 500ms
Frequencies
Frequency values are used with aural (or spoken) cascading style sheets. There are two value units: ‘Hz’, or Hertz and ‘kHz’ or kilohertz, 1,000Hz = 1kHz (case-insensitive). Frequencies can be used to change the pitch of a voice reading text. A low frequency is a bass sound, a high frequency is a treble. When CSS like the following snippet is used, a low-pitched voice, such
p.low { pitch: 105Hz; } q.squeal {pitch: 135Hz;}
This is a great resource to have in one place. I never knew about the frequency value. Nice work!