CSS REM: What is REM in CSS?

Click for: original source

In this article I’m going to discuss some use cases of REM (Root EM) in CSS. CSS (which stands for Cascading Style Sheets) uses properties and values to create all the aesthetic magic that goes on in webpages. By Slimane Aguersif.

This article is about one of these values, namely REM, which stands for Root EM. REM is a value of the value/ data type length. Another value of length is our good old friend pixel (px). Every property that accepts lengths as a value will accept REM. Some of these are margin, padding, and so on.

The article will walk you through:

  • What is CSS?
  • What is REM in CSS?
  • Relative values vs absolute length values in CSS
  • Root EM and root font size
  • Responsive web design with REM

Google encourages you, in this article about responsive web design, to restrict line length to not much more than 10 words. This is in accordance with classical readability theory. They advise that you should use media queries with break points chosen in such a manner that the width of your content/text lines are not too long. This helps provide the best possible reading experience. Nice one!

[Read More]

Tags css web-development app-development learning