Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Arrigo Lupori
Arrigo Lupori
17,547 Points

Em, Px and Percentages, when and which?

Hello! Here is what I understood so far about these measurements:

  1. Ems are a measurement that uses the letter 'm' as reference, relating to the parent element. The default size for text is 16 px which means that if "p" nested inside "body" gets a font-size: 1.5em; it will render as 24px. This is supposed to be (if I understand correctly) useful especially for typography and text, although I see it used in margins as well during these courses.

  2. Pxs are single units that do not represent an actual pixel on a screen, although they do represent the single smallest unit we can use in CSS. They are useful to allow for precise control over anything, although I see it used especially for box model properties. These are the ones that concern me the most because of their 'non-fluid' nature. I am often prone to using them in many occasions when trying to build a website, but then again I step back when styling major blocks, because I fear of them pushing out of the browser window when resized, hiding content.

  3. % allow for fluid layouts that shrink and expand with the browser window. They relate to either the browser window or the parent block element. I am not too sure when it is best to use these, although I do understand they allow for great control over responsive designs.

What I am wondering is; are there specific properties where we should stick to these for better design in the long-term or is all of this just a rule of thumb to keep in mind, and we could swap whenever we think it is best, using our common-sense?

Also, do I even have to care about it at this moment (I am studying CSS basics) or should I just be patient and carry on with other courses?

I'm getting a bit confused because I see the use of ems with margins sometimes and I don't know how this will affect the design, pxs seem a more logical measurement to me in that case. I do even think of using negative values sometimes to bring a sub-heading closer to the main one, although it is said to be not recommended.

I am a noobie, sorry if this doesn't make sense at all and thanks in advance :)

PS: I know there is documentation out there but I'd rather have a quick insight from a fellow pro than go through a big document, atleast right now that I'm just starting out.

2 Answers

Michael Trilford
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

Hello,

I think you said it best, use common-sense where possible. Web design is a process, so you will come to the correct solution after a bit of trial and error.

I use em units for every measurement now, when they layout breaks in certain areas I may opt to use percentages to mitigate the visual issues, or I use percentages for flexible content areas.

Modern browsers render type in 16px, I'm pretty sure some IE browsers render in a different size. I hardcode the pixel value on the HTML element, then I proceed to convert every pixel value to em's. I usually design directly in the browser, so I hard code a pixel value to get it looking right, then I convert it over.

Example: 100px / 16px = 6.25em

Note: When ever you are working out the height or width of an element, it will pay to inspect the element quickly, and see what size it is inheriting, as it may have a different font size associated with it. It is a common issue on more complex layouts, and if you want it pixel perfect like I do, then this is a good tip. Pixel perfect in browser, not photoshop pixel perfect :-)

Example: 100px / 18px = 5.55555555555556em

The beauty about having every element as an Em unit, is when you change the HTML font size, the entire website scales up or down, this is great for responsive design! Make the font size 14px and all the elements reduce in size. This drastically reduces the amount of code within media queries.

Hope this made sense, a little sick today.

Maybe have a look at this, it starts you off on the right direct. Everyone has their own opinions on design, so possibly create your own typographic rules and update the em values.

https://github.com/michaeltrilford/MobileFirst-BaseStyles

Arrigo Lupori
Arrigo Lupori
17,547 Points

Wow, well, thank you for your answer. I do understand what you mean by being able to scale the whole page by changing a single property value using only ems and I do get the thing about pixel perfection in the browser, since I read many companies do not believe in Photoshop designing of webpages (although I have no idea how photoshop works since I'm just starting on the whole web design train).

I don't understand exactly how it can help with media queries since I haven't done a whole lot of them yet, I previously studied both HTML and CSS by myself and decided to jump on Treehouse for actual on-field practice, but media-queries weren't listed in the sources I have used until now.

Anyway, it will come to me with time :)

Thank you and I will definitely check out your github in the days to come, it's a bit late now.

Cheers!

Michael Trilford
Michael Trilford
7,232 Points
Michael Trilford
Michael Trilford
7,232 Points

No worries, it sounds like you're going to pick this up pretty fast. Have you looked into Mobile first?

http://bradfrost.com/blog/web/mobile-first-responsive-web-design/

Here's a little snippet with media queries:

html { font-size: 12px; }

@media only screen and (min-width: 768px) { html { font-size: 14px; } }

@media only screen and (min-width: 850px) { html { font-size: 16px; } }

Even though I'm designing mobile first, I do base all my values off the 16px font size. Pretty sure I do this because I'm using the typographic scale, and a 24px baseline. All I'm after is the correct ratio of negative space, so I think I'm happy with the decision to base the values off the desktop units.

http://alistapart.com/article/settingtypeontheweb

Arrigo Lupori
Arrigo Lupori
17,547 Points

Oh, snap! That makes perfect sense now that I recall the first course on Treehouse.

So what you're saying is just by using a couple of media queries you are able to resize every single component of a website for many different screen-sizes? That seems unbelievably convenient!

These break points would then modify with a couple of extra rules both the header - making it either mobile or desktop friendly - and the content columns below..

I guess there would be a bit of testing involved regarding smartphones, tablets, and 'phablets' (god, I hate that word) users, making sure the site scales correctly for each size.

Thank you for the links! I'll be checking them out as soon as possible, tomorrow I'm stuck at work for the whole day but I have a couple of hours break during which I should be able to read them on my phone.