Units of Measurement in CSS
There are many units of measurement in CSS for the developers to use. We have got a list of units of measurement used in CSS are relative to this post. The units of measurement in CSS are used to set a value that is called a length property in CSS. The Units of measurement includes some of the values which are recently included in CSS3 and not yet supported in all browsers. The rem measurement CSS is one of them.
In the previous post we have discussed about the Text Color Property in CSS. Now we are going to give you an overview of units of measurement in CSS.
In CSS the length (<length>) in no more than a numeric value with a unit of measurement following it. See the following code to understand it a bit more:
In the above code the 16px is the length in CSS. Remember that the white spaces are not allowed within the numeric value and the unit of measurement. The units of measurement in CSS are widely divided into two parts the absolute values and the relative values.
Units of Measurement in CSS Absolute Values
The absolute units of measurement in CSS are also known as the fixed values are typically used when you know the user agent’s physical properties. It means that you know the dimensions of the machine that will use it. See the list bellow that how many absolute or fixed units of measurements are there to in CSS.
- Inches symbol in CSS is “in”
- Centimeters symbol in CSS is “cm”
- Millimeters symbol in CSS is “mm”
- Points symbol in CSS is “pt”
- Picas symbol in CSS is “pc”
The best use of these values is when you know the size of the output device. You know that how much the length will be cover by the specified element. If you do not any have any idea about what kind of devices are going to use this document. You should go for the relative units of measurement. See the list below for the relative units of measurement.
- em abriviation of ems
- ex abbreviation of exes
- px abbreviation of pixels
- gd abbreviation of grids
- rem abbreviation of root ems
- vw abbreviation of viewport width
- vh abbreviation of viewport height
- vm abbreviation of viewport minimum
- ch abbreviation of character
These are the relative units of measurement in CSS. These include some of the units that are just recently included in CSS3 and are not fully supported in many browsers. Some of them are those which are used for very specific purposes like grids etc. The vh, vm and vw are used to size the element according to the view points but is not supported widely yet. The ch or the character fonts are based on the zero character of the font.
We have got px or pixels in the list of relative units. The pixels are relative because the pixel of a 1024 x 768 screen resolution will be quite large compare to a 1440 x 900 screen resolution pixel.
Em Unit of Measurement in CSS
Em is used by developers for the font-size declarations in CSS. The default value with em is 1em for a browser’s default value. For instance if the browser’s default value is set to 20px then
1em = 20px;
Keep in mind that it calculates the value based on its parent’s value. If you want to use the em unit for values other than font-size then it will be calculated depending upon the font size of the text of the element. See the example below to understand more.
Now if the default font-size for a device is set to 16px font-size for h2 will be 32px. On the other hand the margin-top value should be 16px but it is not. The value for the margin-top will be 32px because it is calculated depending upon the font-size of the h2 tag.
Exs are the based on the “x-height” of a font.
Rem Unit of Measurement in CSS
These are very similar to the ems but the difference is that they are relative to the root of the element. They are not relative to the immediate parent of the element. Keep in mind that the rems are not yet widely supported in all the browsers.
Percentages Unit of Measurement in CSS
The percentages are very widely used in developing fluid layouts in CSS. The percentages are not included in neither the relative units of measurement nor in the absolute units of measurement. But these are the relative units of measurement for most of us. The percentage values are calculated relatively depending upon their parent elements. They are used with % sign with a numeric value.
See more CSS tutorials here on HowToCode.pk