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 Joseph Carrillo
Joseph Carrillo
2,137 Points

CSS DataTypes

Hello All,

I am just trying to gain a better understanding in the real world when i would use appropriately.

I went over some data types in the CSS basics track. It seems that px are for fixed assignment. ems, rems, %'s are for more flexibility?

I am just wondering when and how would i apply these to different rules. For instance, i know with the header or h1 tag we would want the header across the whole page. We would apply width: 100% so it scales across the page.

Thanks, JC

2 Answers

Savannah Lynn
Savannah Lynn
13,662 Points

Hi Joseph, when to use fixed values and when to use relative values will be covered later in the track, especially when you are using a responsive design. For example, if I set the width of a column to be 80%, the column will take up 80% of the width of the page no matter how large or small I make the screen. This is super handy when creating responsive layouts. However, if you want a specific size that doesn't change even when a screen size adjusts, then you can use a fixed amount like pixels. For example, your might set your paragraph font-size to 18px. The paragraph font-size will stay the same on all size screens, so a fixed amount is okay to use here.

I find that fixed amounts are easier to style to create exactly what you want, however relative amounts are extremely helpful if you have any plans to use that site on other size screens. Sometimes I will design using fixed amounts to get my layout, and then convert those fixed amounts to percentages. But this is just my preference.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

changed comment to answer

Joseph Carrillo
Joseph Carrillo
2,137 Points

Savannah,

Thank you for the reply! Well it seems you would want relative values for being able to change the layout of your website to be used by multiple devices? Responsive layout? Then you would use media queries to change the look from device to device right? I guess i am just trying to understand the purpose if you want absolute values.

Savannah Lynn
Savannah Lynn
13,662 Points
Savannah Lynn
Savannah Lynn
13,662 Points

Exactly. Using percentages makes resizing layouts on multiple devices so much easier! I would say generally I use percentages for sizing width, anything running left to right. Sizing anything vertically, such as space above and below an element are pretty safe to use absolute values. It's a good starting point anyway!

Joseph Carrillo
Joseph Carrillo
2,137 Points

You are awesome! Thank you! That really gives me some insight with the absolute and relative values. It makes a lot of sense. Being here seems like it really reinforces what you learn.