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
Christopher Sea
3,726 PointsIs it possible to change the default font-size using 2 .css files?
By editing a linked normalize.css file, is it possible to change what a webpage thinks is the default font-size? I was thinking if a normalize.css was edited to change the font-size, than a second .css file would read the normalize.css as the default. I just started learning CSS a couple months ago, so I'm not entirely sure if this would work.
3 Answers
Codin - Codesmite
8,600 PointsJust declare the font-size of body to change the default :)
For example:
body {
font-size: 12px;
}
h1 {
font-size: 1em; /* would be equal 12px */
}
h2 {
font-size: 2em; /* would be equal 24px */
}
body is a parent element to every element in your webpage (you can also declare the above on html instead of body as this is also a parent to every element of your web page including body), em values are percentage values, 1em = 100% of the parent elements font-size, so for example in the above example I set font-size: 1em for h1 tags, this inherits the font-size of 12px from its parent "body" (100% of 12px).
I do not use normalize.css and normally normalize my own defaults at the start of a project so if using normalize.css I would declare the above rule in the stylesheet you call last so that any settings from normalize.css will not overide with cascading rules.
I use the above in every project I work on because it makes for very easy website wide responsive font sizes without having to declare media queires for every element on the site.
Example:
body {
font-size: 18px;
}
@media screen (max-width: 600px) {
body {
font-size: 14px;
}
}
h1 {
font-size: 2em; /* Will be 36px if display larger than 600px and 28px if less than 600px */
}
h2 {
font-size: 1em; /* Will be 18px if display larger than 600px and 14px if less than 600px */
}
p {
font-size: 0.5em; /* Will be 9px if display larger than 600px and 7px if less than 600px */
}
As you can see above by doing this I can easily change the size of all fonts on the page with the use of just one media query to change the default font-size on the page when using em values. Rather than creating an media query for every individual element.
Hope this helps :)
*Looking through normalize.css version 4.0.0 I can not actually see anywhere in the file that font-size is actually defaulted, I believe this was a rule in older versions of normalize.css but seems to have been removed.
Jonathan Grieve
Treehouse Moderator 91,253 PointsThe second CSS file will override the normalize.css setting. Having the normalize CSS file will give your project a start, kind of a helping hand to make sure your website looks the same in as many browsers as possible. But much the same as one CSS selector will override the other in the same CSS file it will override the same selector in another CSS file, so long as they're both linked in the <head> element. :-)
Christopher Sea
3,726 PointsOK, I think I understand now. I was thinking em & px had there own specificity; that if you tell normalize.css to use font-size in px (for the body), and the second.css to use font-size in em (for the body), than the second.css would relate its em value to the px of value of normalize.css. But I guess that's wrong; the second.css' font-size will just nullify the normalize.css' font-size. Thank you.
Codin - Codesmite
8,600 PointsYup, CSS stands for Cascading Style Sheet, the rules cascade.
So for example if you declared.
#example {
color: red;
}
#example {
color: blue;
}
The color value for the div id #example will be blue as blue rule was declared last it will overide the previous rule.
This works in the same way when importing external css files.
This is why it is reccomended to import normalize.css before your own styles so that the rules declared in normalize.css do not override the rules you set in your own styles.
Another example:
#example {
height: 200px;
color: red;
}
#example {
font-size: 16px;
color: blue;
}
example will have the following rules:
#example {
height: 200px;
color: blue;
font-size: 16px;
}