Standardista

CSS3, JavaScript and HTML5 explained

CSS Value Lengths, Times, Frequencies and Angles

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 with 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);
                        -moz-transform: rotate(-5deg); 
                      -o-transform: rotate(-5deg);
                       transform: rotate(-5deg);
              }
  .image2, image4 {
                        -webkit-transform: rotate(7deg);
                        -moz-transform: rotate(7deg);
                        -o-transform: rotate(7deg);
                      transform: rotate(7deg);
              }

polaroids_sm.jpg

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.
angles.gif
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;}

11 Responses to “CSS Value Lengths, Times, Frequencies and Angles”

  1. [...] CSS Value Lengths, Times, Frequencies and Angles [...]

  2. [...] – CSS Value Lengths, Times, Frequencies and Angles “In this article we go over all the math type units that can be applied as property values in [...]

  3. [...] CSS Value Lengths, Times, Frequencies and AnglesIn this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  4. [...] CSS Value Lengths, Times, Frequencies and AnglesIn this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  5. [...] CSS Value Lengths, Times, Frequencies and Angles In this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  6. [...] CSS Value Lengths, Times, Frequencies and AnglesIn this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  7. [...] CSS Value Lengths, Times, Frequencies and Angles In this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  8. [...] CSS Value Lengths, Times, Frequencies and AnglesIn this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  9. [...] CSS Value Lengths, Times, Frequencies and Angles In this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  10. [...] CSS Value Lengths, Times, Frequencies and Angles In this article the authors go over all the math type units that can be applied as property values in CSS. [...]

  11. This is a great resource to have in one place. I never knew about the frequency value. Nice work!

Leave a Reply