Search within TutorialsPark

CSS Units & Sizes


The units of measurements for fonts, colors, time. CSS3 units included.


CSS Units

1.Some CSS property takes keywords as values while many others take keywords along with sizes, colors, URL's as values.

CSS units are of type

Number

Length

Percentages

Time

Angle

CSS Length

1. CSS properties to set measurements (both horizontal or vertical) require values to be specified as length.

2. Length can be specified as two types i.e absolute or relative

absolute: Absolute units are fixed measurements. Eg: mm, cm, inch etc.

relative : Relative units are relative to other lengths. Eg: em, ex.

3. While writing CSS rules for length there should be no blank spaces between the number and units.Eg: 2em, 7px, 5mm.

If the value is "0" there need not be a unit following it. Eg: 0px or 0 have the same meaning.


CSS Absolute Length Units

Units Descriptions
px Pixels(0.265mm or 1/96 part of an inch).
pt Points(0.353mm or 1/72 part of an inch).
pc Picas(12 points or 1/6 part of an inch or 4.233mm).
in Length in Inches.
mm Length in millimeters.
cm Length in centimeters.

CSS Relative Length Units

Units Descriptions
em The browsers default font-size or the font-size of parent element .
ex Half the size of an em.

Note: em has a multiplicative effect.Hence, when nested, sizes can either shrink or enlarge.

Example: CSS Length

Give it a TRY! » Note:As a Standard, CSS Pixels are also called as reference pixels, one pixel is equal to 1/96 part of an inch .

CSS3 Lengths.

1. With CSS3 many new relative units of measurement were introduced.

2. All though browser support for these units is not uniform for all browsers, but many browsers are upgrading to CSS3 standards now.

CSS3 Units: Length

Units Descriptions
rem Similar to em but font-size is equal to that of root element. Removes all multiplicative effects.
vw The width of the Viewport. Equal to 1% width of the Viewport
vh The height of the viewport. Equal to 1% height of the viewport
vmin The minimum width(vw) or height(vh) of the Viewport.
vmax The maximum width(vw) or height(vh) of the Viewport.
ch Denotes the width of the character "0" (zero) in the current font size.

Example: CSS3 relative units

Give it a TRY! » Note: 100vh and 100vw are equal to width and height of the viewport.


CSS Units: Percentages.

1. To express a value relative to another value we use Percentages(%).Here the value is followed immediately by a percentage sign. Eg: 3%, 50% .

2. You can express percentages upto several decimals. Eg: 50.453% , 45.342%.

Example: CSS Units in Percentages

Give it a TRY! » Note: Values in Percentages are mostly expressed relative to the parent element.


CSS Units: Time

1. New animation properties introduced with CSS3 requires values to expressed in time. Eg: seconds(s) or milliseconds(ms).

CSS Units: Time

Units Descriptions
s Time duration in Seconds
ms Time duration in milliseconds. i.e 1/100 of a second.

CSS3 Units: Time

Give it a TRY! »


CSS Units: Angles

1. New transform properties introduced with CSS3 requires values to expressed in angles. Eg: degree(deg) or radians(rad).

CSS Units: Angles

Units Descriptions
deg Angles in degrees
rad Angles in Radians
turn Angles in turns. i.e 360 degrees.
grad Angles expresses in Gradians. i.e 1/400 of a turn.

CSS3 Units: Angles

Note: This is a good development when working of a large project with multiple developers. Give it a TRY! »