Hello guys! morning to you all, you all are welcome to this section of my tutorial on Cascading Style Sheets (CSS). In this tutorial am not going to be discussing much, i just want to discuss about the Measurement Units in CSS.
Before we start the actual discussion, i would like to give a brief idea about the Css Measurement Units.
CSS supports a number of measurements including absolute units such as inches, points, centimeters, etc, as well as relative units such as percentages and em units. You need these values while specifying various measurements in your Style rules. Example border="2px solid blue".
Below are the list of all the CSS Measurement Units along side with proper Examples:
Alright guys that's it for this tutorial, study the above units very well because you always going to make use of them when designing your web pages. Like our facebook page, also subscribe with us to get our latest tutorials sent directly to your mail, thank you and bye for now.
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial)
Before we start the actual discussion, i would like to give a brief idea about the Css Measurement Units.
CSS supports a number of measurements including absolute units such as inches, points, centimeters, etc, as well as relative units such as percentages and em units. You need these values while specifying various measurements in your Style rules. Example border="2px solid blue".
Below are the list of all the CSS Measurement Units along side with proper Examples:
Unit | Description | Example |
% | Defines a measurement as a percentage relative to another value, typically an enclosing element. | P {font-size: 10pt; line-height: 100%;} |
cm | Defines a measurement in centimeters. | div {margin-top: 5cm;} |
em | A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus, 2em would be 24pt. | P {letter-spacing: 4em;} |
ex | This value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x. | P {font-size: 24pt; line-height: 4ex;} |
in | Defines a measurement in inches. | P {word-spacing: 18in;} |
mm | Defines a measurement in milimeters. | P {word-spacing: 10mm;} |
pc | Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch. | P {font-size: 15pc;} |
pt | Defines a measurement in points. A point is defined as 1/72nd of an inch. | Body {font-size: 20pt;} |
px | Defines a measurement in screen pixels. | P {padding: 20px;} |
Alright guys that's it for this tutorial, study the above units very well because you always going to make use of them when designing your web pages. Like our facebook page, also subscribe with us to get our latest tutorials sent directly to your mail, thank you and bye for now.
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial)
