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
paulcantu
967 PointsStandards for CSS dimensions
This question is about CSS in general, and how to use CSS properly for different web browsers.
What are the proper dimensions for using CSS so that it is compatible in all browser sizes, screen sizes, and variations?
For instance, in one of the tracks for web development, the instructor inputs 15px for the margin like so:
h1 { font-family:sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; } And then uses negative 5 pixels like this :
h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal;
}
What are the rules for using different css dimensions (i.e. -5px 0 0; or 15px 0;)? I have also seen the instructor use percentage in some instances rather than pixels?
Example:
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
Could some please provide more explanation for this? Or perhaps an online resource that answers this?
I am having problems understanding this concept or how to use the right unit measurement so that it balances out for each page.
2 Answers
Jonathan Grieve
Treehouse Moderator 91,254 PointsHi there,
First of all I fixed up your post just to make your CSS show up a little better. Check out the code Forum markdown and try it out in the forums as a great way to post code. https://teamtreehouse.com/community/cheatsheet
Right... as for your question... the best way to force all your browsers to show your code the same way is to use what#s called a CSS reset. By default, all browsers display HTML elements a little differently. They have what are called "User agent" styles so they apply their own styling unless you explictly tell them to do otherwise.
With a CSS reset, you get a level playing field and any other styles you add will look the same in all the major browsers.
Here's a couple of examples of great CSS resets you could apply.
- CSS Rest http://meyerweb.com/eric/tools/css/reset/
- Normalize CSS https://necolas.github.io/normalize.css/
You normally appy these styles as the first one of a set of external stylesheets in your HTML
<link rel="stylesheet" type="text/css" href="styles/reset.css
So you could put any CSS rest styles in that file... folllowed by all your other styles.
Hope this helps :)
Mikey Neilson
Front End Web Development Techdegree Student 12,642 Pointshey there paulcantu im kind of new to all this but this help me understand CSS Units relative lenghts and absolute lenghts http://www.w3schools.com/cssref/css_units.asp Hope it helps:)
paulcantu
967 Pointspaulcantu
967 PointsHey thanks for the reply Jonathan, I understand that normalize.css should precede any external custom css.
I guess I'm still confused as to the amount that should be used for each selector when I want to use custom css?
For instance, margins can be 15px or -5 px. How do I know which size to use?
In this example:
h2 { margin: -5px 0 0; }
But margins can also look like this:
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }
So how many pixels do I know to use so that all content fits together neatly? Or must this be accomplished by trial and error?
Also font-sizes can have more or less than 1em (1.75em or 0.75em). Why would I need less than 1em or when should I use more or less than 1em?
Is there some kind of guideline that shows dimensions for using CSS?
Jonathan Grieve
Treehouse Moderator 91,254 PointsJonathan Grieve
Treehouse Moderator 91,254 PointsTrial and error generally,
It's worth thinking about how much space there is in your viewport I,e, the part of the website you can see in your viewport.
There's not really a right or wrong answer in terms of which values to use for your widths or margins. Just play around and see what works for your design,
Consider how big your element is compared to either the root element or otherwise the containing element. If you find your element has pushed down to the next line it's because the browser is looking for the next available space :)