Learning CSS Series

Part -7 Sizes and Units in CSS

Last time we covered how to style background and images!

This time I am very happy to tell you that the CSS Bullets book has been launched on Amazon which you can buy today to get hold of all this amazing CSS knowledge in one go.

To get your own copy click here.

In this part we are going to cover one of the most important and most confusing feature of CSS, Sizing and Units.

So let’s begin!

Sizes and Units

Following are the points to be covered under Sizes and Units:

Which Units can we Use?

Following are different units we can used to reposition or size the elements

While rem and em are more concerned with the font size, the rest of the units handle other types of positioning, resizing etc.

How is the sizing calculated?

In real world we calculate the sizing through some real world measurements such as cm, mm, inch etc.

In the digital landscape this is however not feasible. We calculate sizes in pixels, percentages or some other formats.

We can divide the units into the following categories:

Absolute Lengths
Viewport Lengths
Font-relative Lengths
Percentages

Let’s take a deeper look at these units:

Under Absolute lengths, we can have px, cm and mm as said earlier these aren’t ideal because the screen sizes determine their lengths and hence aren’t suitable.

The viewport lengths however are flexible units and are used whenever we want some dynamic sizing to be present for our page elements.

The font-relative lengths are very useful for dynamically resizing different types of fonts for our web app.

The percentage is also known as a special sizing property that helps us in resizing the elements. It is called special, because the percent sizing helps in dynamically resizing the element within a fixed block or the contained viewport.

Generally we should remember the following rules:

Understanding em and rem

Generally when we apply font sizing, we take pixel values like 10px, 20px and so on.

But these are static values and will remain fixed throughout different browser configurations.

There is a possibility that some screens on some browsers will have a default font size of let’s say 30px. If we then supply a fixed size of 10px, this won’t result in good UI.

To tackle this problem, we have the em sizing, which basically is a calculation of sizing done based on the default font size of browser and the em value supplied.

For example: Let’s take a block A to have a size of 20px.

Now if we give font size of 2em, it would mean 2 X 20px = 40px.

This is the new calculated dynamic font size.

Now the difference between em and rem is quite unique.

em inherits the em sizes applied to its parent. This means that any nested block will inherit the em sizing supplied to it by its parent.

rem literally means ‘root-element’. This sizing allows us to resize the font with respect to the root html element.

This gives us much better control over the font sizing as we have to be only concerned about the html and not about any other nested blocks. This results in better UI as the calculation of size isn’t dependent on any third party source. The only caveat is that rem might not be supported by all modern browsers.

vw and vh

Sometimes we need to set the height and width of an element to that of a viewport. This is not possible until we have some way of accessing a viewport’s parameters.

This is thus done by the vw and vh.

Hiding Scrollbars on Windows machines:

After adding vw , the scrollbars appear in case we are working on Windows. This happens as using vw on Windows does not include the scrollbars – vw: 100 is equal to 100% of the viewport width + the scrollbars. On the Mac this is not an issue, but when using Windows it is as the scrollbars are displayed by default.

In case we don’t want to display these scrollbars, we can use one of these solutions:

– Use width: 100% instead of vw: 100

– Add overflow-x: hidden; to the body selector in the shared.css file to hide the horizontal scrollbar (or overflow-y: hidden to hide the vertical scrollbar)

Alternatively we could also use the ::-webkit-scrollbar pseudo element. Simply we should add the following code to the shared.css file:

body: :-webkit-scrollbar {
width: 0
}

Which Unit Should I Choose?

Above are the recommendations for choosing a unit to size different html elements.
This is again a recommendation and the actual units should be picked on the basis of functionality and the type of webpage being used.

Summary

So we now know a Sizing and units styling in CSS. In the next blog of the “Learning CSS” series, we will be exploring Javascript in CSS and Responsiveness in our Advanced leg to understand some more concepts that we need to be familiar with while implementing CSS!

Hope you like this series and stay tuned for more content on the learning.