Work in progress

Learn Units

CSS allows you to use different units of measurement to describe properties. These properties range from font size to element size. They help you, the web developer, position elements as well as describe elements. This is all a part of giving you maximum flexibility, so you can design websites as you see fit. Well designed websites are responsive.

Responsive Design

Responsive design is the concept that as the size of a screen varies, the presentation of a website will change to optimally display the content. You experience responsive design every day when you use your computer (a wide screen) to access a web page, and then you go to that same web page on your phone and see a smaller, more compact site.

Relative

Relative units are designed to be used with changing screen sizes. They are powerful, because they give you greater flexibility, but they're also sometimes difficult to use, because they are always relative to some other value. The value that they're relative to can change based off of the property you are modifying. Sometimes, the relative value is the element you're modifying itself, and sometimes it's

Relative Units (EM)

Typically used with font sizes where 1em is equal to the font-size of the parent element. 1em is 100% of the font size.

Very useful for when an element should scale based off its parent element.

Root EMs (REM)

Relative to the root element's font size, so a relative unit based off a single absolute value. This makes using REMs generally more reliable.

Want an in-depth guide explaining when to use EMs vs. REMs? Check this guide out.

View Height (VH)

The viewport is the seeable space presented by the browser in which the content of your page lives. This changes as a user resizes their browser window.

View Height (vh) units are a relative stand in for percetanges, so 1vh is equivalent to 1% of the height of the viewport.

View Width (VW)

Percentage (%)

Always set relative to another value, which is sometimes the element itself or the parent element.

Pros	Cons
Allows you to divide elements inside a container into easy to understand portions (e.g. 50% / 50%)	The relative value changes across properties

Absolute

Absolute units can be more difficult to make responsive and scalable. In modern web development, you should use these sparingly. As a result, this section is minimal.

Pixels (PX)

Pros	Cons
Allows you to specify an exact size of an element	Not actually always 1px on your screen due to the different types of displays.

Other Units

There are other types of units, which we will not cover here, because they are more relative to print applications. They are points (pt), inches (in), centimeteres (cm), and millimeters (mm).