px em and rem - Fast and easy way

TL;DR

This video provides a concise explanation of CSS units - pixels, EMs, and REMs - and their differences, relative measurements, and default values.

Transcript

hey there everyone they shear and welcome to this quick short video on CSS units I won't be touching my editor but you will understand thoroughly about these three musketeers of internet pixels Ames and REMS they're pretty popular over the CSS world but it's a little bit confusion because the videos are too long so let's not make it too long let's ... Read More

Key Insights

• 🎨 Pixels in CSS are fixed measurements, unlike screen pixels, and should be used with caution in responsive designs.
• 🥺 EMs are relative to their parents and can lead to complexity when nested too deeply.
• 😒 REMs are always relative to HTML tags, making them simpler to use and consistent across elements.
• 😐 Overusing EMs and nesting can result in unintended and large sizes.
• 👹 REMs have a default size of 16 pixels, which can be modified by changing the default behavior of HTML tags.
• 🎨 Understanding the differences between CSS units is essential for designing responsive websites.
• 😊 Pixels, EMs, and REMs each have their pros and cons, and careful consideration is necessary while choosing the appropriate unit.

Questions & Answers

Q: What is the difference between pixels in CSS and pixels on screens?

In CSS, pixels are fixed measurements and don't change based on screen size. So, if you set something to 30 pixels, it will look the same size on different devices, unlike pixels on screens, which can vary in size.

Q: How are EMs different from REMs?

EMs are relative to their parent element, so their size varies based on the parent's font size. REMs, on the other hand, are always relative to the base HTML tag's font size, making them more consistent and easier to use.

Q: What can happen if EMs are overused and nested too deeply?

Overusing EMs and nesting elements too deeply can create a messy and complicated structure. Each level of nesting multiplies the font size, leading to large and unintended sizes. It's important to use EMs judiciously to avoid confusion.

Q: Are REMs always 32 pixels in size?

REMs have a default size of 16 pixels, which corresponds to the default font size of HTML tags. So, unless you modify the default behavior of HTML tags, using 2 REMs will result in a size of 32 pixels.

Summary & Key Takeaways

• Pixels are fixed measurements in CSS and are different from pixels on screens, so be cautious when designing responsive websites.

• EMs are relative to their parents and can lead to messy nesting if overused, while REMs are always relative to HTML tags and easier to use.

• Both EMs and REMs have default values of 16 pixels, but REMs are more consistent due to their relationship with HTML tags.