CSS Measurement Units
Welcome to all our readers on our website at www.tutorialpath.com. As you all know that here on our website we will provide you lots of information related to the latest and newly introduced technology which help you to get updated with the latest tech. Here you will get all the useful information which is required in this tech world. As you know technology is one of the trending part in this world. So, here again we came up with a latest and new tech information which is related to the process of Css Measurement Units. With the help of this article you will get to know the complete process of how to create Css Measurement Units in a step by step manner. So, simply have a look to this article and grab all the useful information which is going to be very helpful for you.
Before we start the actual exercise, we would like to give a brief idea about the CSS Measurement Units.
As we know that CSS supports a number of measurements including absolute units such as inches, centimeters, points and so on, as well as relative measures such as percentage and em units. You need these values while specifying various measurements in your Style rules e.g.
border = “1px solid red”.
We have listed out all the CSS Measurement Units along with proper Examples
It’s also known as relative lengths units. In such condition where we don’t know exact length of element, then we use relative length units. Relative Length Units are more flexible than absolute length because there is no limitation of screen size, direction or other variation, it automatically adjust according to variation. Relative length units are defines based on other relative elements length i.e. parent or child elements.
- Relavive length is relative to another length property. ex – Child Element length is 30% of Parent Element
- Relavive length Units are not fixed type. they vary according to other related Elements length
- In Below table we are listing all Relavie length Units.
These are explain via practical used:
px
Pixels (px) are the most commonly used unit of measure Pixels (px) are the most commonly used unit of measure because there are many standards in web design based around the pixel. Just for your own knowledge, a px maps to one pixel on your screen. It’s super small, but the point of having this reference is to know exactly how much physical space an element or text will fill.
When you are using pixels, keep in mind that these units change relative to the size of the screen. 12px is going to look a little different depending on whether it’s on a phone or a laptop . Pixels form the base measurement of websites. The default root size of a web page is set to 16px by all of the popular browsers.
%
Percentages get a lot of use in responsive design and are pretty straightforward. The one thing you have to remember is that the size is relative to the parent element. If you have a <h2> nested in a <div> and you give it a width using the % unit of measure, then the <h2> width will be relative to the size of the <div>. It’ll look something like this:
em
This is relative to the font-size value of the element. So say you have a <p> inside of a <div> and these are the styles you have:
The <div> will have a font size of 3 times the font-size of the <body>. So that will give it a default of 48px. That number comes from the default font size on browsers which is 16px like we discussed earlier. With the <div> being 3 times that, you get the 48px.
That means your <p> is going to have a width that is 2 times bigger than the font-size of the <div>. So your <p> would have a width of 96px.
That’s how the em unit of measure works. Remember that the font-size value of the containing element determines the size of a child element using em.
rem
This unit of measure is really similar to the em unit of measure except it is easier to understand. The rem unit of measure is based off of the font-size of the root element. Unless you change the <body> font-size, this base size will be 16px.
That means everything that has the rem unit behind it is just a multiple of 16px. So for example, let’s say you have a sidebar and a main container on your page. Here’s your CSS.
Related Keywords: