When starting out learning to design a website/code one of the first hurdles to get through is how to write html and css. Learning these fundamentals are paramount in order to understand how a website is laid out and how it is styled. Once the fundamentals start to become known there are some little(but big) concepts to understand that can make a big impact on what you are doing. In this series of posts I will discuss some of the lesser discussed attributes in learning to code. The first topic I will discuss are the ways in which CSS can express length in the items you are placing on your site. What are the units we see in other’s site like em, rem, px and what do they do and how do they differ? Let’s start with em. Em is a relative unit length which means they are relative to something else. Using relative units can be a good idea to get the multiple items on the page in scale with one another. When using em, this unit means the parent element’s font size. When nesting elements Ems take sizing from their parent element. So then what does rem mean? Rem stands for “root em”.When styling something using rem it will take their size from the root element meaning that unlike the em, each level of nesting after a rem will not keep getting larger. So what about pixels then? A pixel is something that is controllable and will not change based on what is nested and not. There have been many developers that have forgone using px in place of using em and rem that are now changing and coming back to pixels. Due to in controllability pixels are something that are easy for designers to use. The big question for what type of measurement to use was initially based on whether a user would zoom in on the page and the effect that would have on what the user would see. The ultimate decisions should be based on user experience. Browsers and support have gotten many updates since the onset of web pages and the general consensus from what I can find is to use rem and px for both ease of use and accessibility for the user.
