SBP Blog

CSS Measurement Values

Jan 03, 2014 by Adrian

CSS imageCascading Style Sheets (CSS) was first released in 1996, and it's a style sheet language that helps web developers to create websites using HTML, XHTML and other languages. Its main purpose is to separate document content such as layout, colors and fonts in order to provide web developers with more flexibility, accessibility and more control.

CSS supports a wide number of properties and many measurement units for each property. So here are some measurement units, which have been used successfully by many web developers:

Em: A relative measurement unit for fonts, which is equal to the computed value of the ‘font-size' property of the element on which it is used. For example, a font with 2em has a size of 200% of the default font size of the parent element. font-size: 0.7em;

Px: Pixel units are relative to the resolution of the viewing device. width: 50px;

Pt: Point units are absolute units and define a measurement in points. The size of a point is 1/72nd of an inch. Although this unit is not recommended by W3C - World Wide Web Consortium (not that this has stopped web developers from using it), pt units are used in websites that pertain to a specific niche, where accurate and static values are needed. font-size: 12pt;

CSS3 first drafts have been published in 1999, and since then new modules have been added to it, CSS3 having now over 50 modules. Recent introduced units like rem, vw and vh are a powerful tool for the web developers that need to create websites for multiple devices.

Rem: Rem (root em) units use the font size of the root element of the document, so, unlike em units, rem remains constant throughout the whole document, so a web developer can set a font size relative to the root element, throughout the whole website. font-size: 1.4rem;

Vw: The Vw (viewport's width) unit is used to resize elements based upon the width of the rectangular viewing region of the browser (1vw is 1% of the viewport width). font-size: 8vw

Vh: By using Vh (viewport's height), a web developer can resize the elements, relative to the height of the currently viewport of the website (1vh is 1% of the viewport height). max-height:95vh

These are only some of the units used in web development, there are many more CSS measurement units (angles, times, frequencies, resolutions etc.). Surfing on the Internet has been more enjoyable thanks to CSS, and considering that CSS4 is on its way, we expect more awesome websites from the web developers in the future.

Don't be shy and tell us you experience with CSS! :)

Tags: IT-Trends  Web  webdesign 


No comments yet.

Your Comment: