I have an html page with an header navbar and content. Both have their own header.css and content.css which define the font-size in the root.
The problem is that the second css overrides the first declaration and both components have the same font size in the root, which makes rem font sizing wrong for the header (in this case).
Is there a way to define two different roots or subroots?
(example)
html{
font-size: 18px
}
#content:root{
font-size: 11px
}
Related
I am using bootstrap 3 in my project and I see that there are 2 declarations of font-size in bootstrap as below:
Scaffolding.less
html { font-size:10px;}
body{ font-size : #font-base-size; }
And the #font-base-size is defined as 14px in variables.less
I have been reading stuff where one way of having responsive font size was to have base font size as px defined in body or html as then use font sizes in rem for different components in body such as p, h1 etc.
But I am not sure, where do I define the base font, should it be in html OR body?
And why does bootstrap has different font size in html and body?
My observations:
When I define some font size in px in html, then only rem thing works for everything, defining font size as px in body doesn't work with rem.
The rem unit is relative to the root, or the html element.
Thus defining the base font size should happen on the html element.
Defining a font-size on the body will work, but all child elements which have a font-size definition using rem units will fall back to the root/html element to calculate their absolute size.
So:
html {
font-size: 10px;
}
body {
font-size: 15px;
}
.parent {
/* font-size will be 15px here */
}
.parent .child {
font-size: 1.2rem; /* resolved to 12px */
}
As to why Bootstrap uses 2 font-sizes: the 10px font-size on the html element is just part of some global reset they use. Also, some margins/paddings are calculated using the base font size, so it's best not to interfere with that too much.
If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1rem = 16px, and 2rem = 32px. If you set a font-size of 20px on the body element, then 1rem = 20px and 2rem = 40px.
In addition, em, rem are not an absolute unit - it is a unit that is relative to the currently chosen font size. Unless you have overridden font style by setting your font size with an absolute unit (such as px or pt), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.
NB: too long for a comment. sorry for that
My site is almost totally designed in "em" (as opposed to px). It is supposed to be much better for modern browsers.
Most of the text is font-size:1em. 1em = 16px by default, I didn't specify it.
But I have some content where font-size is 1.2em and other which is 0.8em (for example for H1 or for small buttons).
The issue with "em" is that it re-scale all the sizes of an element (margin, padding, height...) according to the font-size.
I have the specific code in my CSS:
/* Reset */
html [and many other elements] {
font-size: 100%;
font: inherit;
}
/* Design */
body {
font-size: 1em;
line-height: 1; /* Line height will equal the em of each element */
}
.small-button {
font-size: 0.8em;
margin-left: 1em;
}
.normal-button {
font-size: 1em;
margin-left: 1em;
}
The normal-button has a margin of 1x1x16 = 16px. But the small-button has a margin of 1x0.8x16 = 12.8px.
Apparently this is a specific "em" property (it would not be the case in "px") which scales everything according to the font-size of the element.
This example is simple; but on my website it makes things really hard for me to keep things consistent.
How can I de-activate this property so that in the example above the 2 buttons have the same margin? (without re-calculating the sizes; which is what I am doing right now!)
It is the purpose of the em unit that it is relative to the currently set font size. If you want to use an consistent form of em, use the unit 'rem'. It is relative to the root element of your page (most likely your html tag) and stands for root em.
Check out this article by Jonathan Snook if you want to learn more about it.
http://snook.ca/archives/html_and_css/font-size-with-rem
Personally, I set my "master unit" in the body and proceed in multiples of 10s. I hate 16pt as stock, because I don't want to use a chart to set my font sizes the sizes I want them.
body { font-size:10pt; }
As far as particular elements, keep in mind that if you have an element (say a ul) with a size of 1.2em, and the li set to 1.0, and your body is 10pt, then the li is actually based off it's parent container, so it would be 1.2em instead of 1.0(aka 10pt as set in the body), because it's parent is 1.2em.
If you have something that you want a specific size throughout (such as a main menu), I suggest you forgo the em method on that particular parent object (or the li themselves) and use a set px or pt method.
How can I reset the sizes of headings to the default sizes? Here's some HTML that I have:
<h2>Hello World</h2>
Here's the CSS for it:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
/*I'd like to reset that height of 16px and use the default browser height */
h2 {
font-size: 100%;
}
I need to override the old h2 selector and reset the headings to the default size? I've Googled this and it said that the heading sizes were browser dependent and I don't want to hard-code the heading sizes.
This is a really basic question I know but somehow I can't wrap my head around what value I need to use to reset the height.
According to A List Apart, the default body font size is 16px (and this is consisent across browsers).
The W3C recommended default stylesheet shows the h2 size as 1.5 em.
Some simple calculation brings us to 16 * 1.5 = 24px.
So, setting your h2 font-size to 24px should do it.
In general, you cannot set a property of an element to its default value except by not setting the property in any author style sheet. Methods suggested for this are based on misunderstandings or on some assumptions about defaults, but the defaults are browser-dependent.
You can use Normalize.css from the beginning and it'll normalize the heading sizes across browsers:
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
For example, here is a fix for the <h1> tag:
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
There isn't a way to go back to the browser's default font-size because everyone does it a little bit differently.
When you change the font size on your h2, it will impact the size of your margins as well (since they are defined in em). I suspect you are trying to modify the font-size to 16px in an attempt to match the margins of other elements that are also specified in em. If this is the case, you will need to set your properties differently:
h2 {
font-size: 1.5em;
margin: .75em 0 0.333em; /* (1 / 1.5) 0 (.5 / 1.5) */
}
The default font-size for headers is medium. See here: https://developer.mozilla.org/en-US/docs/CSS/font-size
So you would do:
h2 {font-size: medium;}
Probably the easiest way to have the heading font-size be set back to default is to remove the font-size declaration from the h2 element you already have, so instead of:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
you will just have
h2 {
margin: 1em 0 0.5em;
}
You will also want to check your style sheets for any other spots a h2 font-size might be declared. If you can't or don't want to remove the font-size delcaration you can do the following to reset the font-size for all h2 elements to default
h2 {
font-size: medium !important;
}
The font-size of medium is the default value for all browsers and the !important at the end makes it override all other declared styles. You need to be careful using important though because it makes it much harder to determine how a style is going to cascade through the elements and/or how it is being applied.
Cheers and how this helps.
Source for default value: http://www.w3schools.com/cssref/pr_font_font-size.asp
UPDATE: Please note that I am seeing this issue only in Chrome (latest version). Everything seems to be fine in Firefox.
By definition:
The rem unit is relative to the root—or the <html>—element. That means
that we can define a single font size on the <html> element and define
all rem units to be a percentage of that.
Let me explain my situation with an example...
Relevant CSS:
html {
font-size: 87.5%;
}
body {
font-size: 17px;
font-size: 1.21428571rem;
}
code {
font-size: 14px !important;
font-size: 1rem !important;
}
I am using the !important declaration to override the font-size of inline code.
The thing is, I noticed that the font-size of code blocks is much smaller than 14px, most probably 12px. But if I remove the !important declaration and set the font-size on a specific code element (styling a specific inline code element), the fonts-size is nice and fine at what appears to be 14px.
Does you have any idea as to how !important declarations may affect sizing in rem's? (Especially considering in my case.)
First off !important is lazy coding and dangerous to maintainability. It's toxic and breaks the nature of CSS (the Cascading portion). Avoid it at all costs.
Second:
code {
font-size: 14px !important;
font-size: 1rem !important;
}
Might as well be written:
code {
font-size: 1rem !important;
}
The second rule overrides the first (again, the Cascading nature of CSS)
rem stands for root em, which is the font-size of the top level element (i.e., html)
and what your rule is saying 1 x the em of the html element, with is 87.5% of the browser default.
EDIT:
Your <p> tags have a font-size of 100% inherited from the parent element which is eventually inherited from body and body has a 1.2142857rem which is roughly 17px This is why you're seeing a difference in font sizes, which is also exacerbated by the the difference of monospace and sans serif fonts.
Okay, the issue was with (1) font-family not defined for code and pre blocks, which meant Chrome and other webkit browsers chose some monospace font that appears smaller (2) line-height was smaller (almost equal to the font-size).
Fixing these two has solved the problem.
I have no idea why Chrome Dev Tools Web Inspector's "Computed Style" shows 11px as the font-size (also applies to any webkit browser, including Safari). I can confirm that it's showing the wrong value because by changing the font to Arial I could easily tell that it's 14px.
Also, after setting the font-family on code and pre blocks, Chrome now shows the correct computed font-size value.
in "CSS: The missing manual" the author says that font-size: medium (or other size keywords) sets the font relative to the browser's base font size.
But what I'm seeing in FF2 and IE6 is that it sets the font size to what I specified in the .CSS HTML or BODY style (which is much preferred).
If it works the latter way, this is very handy if you have nested styles and you know you want some text to be the body font-size (i.e., "normal sized text").
From the CSS 2.1 specification:
The 'medium' value is the user's preferred font size and is used as the reference middle value.
If a browser doesn't do this, then the browser is buggy.
It will be based upon the parent element, so as to respect the cascade. If it is helpful, I always do my font sizes this way:
body {
font: normal 100% "Arial","Helvetica",sans-serif;
}
p, li, td {
font-size: .85em;
}
li p, td p {
font-size: 1em;
}
Go 100% on the body, then use em for everything else. I never use "smaller" or "medium" or anything like that. I have more control this way.
Edit:
Please see Jim's comment about "medium" being an absolute font size. Good to note.
As noted before medium is set by the UA (browser) but you can still get the behaviour you wished by using rem. rem is relative to the root element (notably the <html> element, not the <body>) and thus affected by styling of the root element.
See this fiddle for demonstration.
html
{
font-size: 60px;
}
#mediumBlock
{
font-size: medium;
}
#remBlock
{
font-size: 1rem;
}
#halfRemBlock
{
font-size: 0.5rem;
}
<div id="inheritedBlock">
Foobar inherited
</div>
<div id="mediumBlock">
Foobar medium
</div>
<div id="remBlock">
Foobar rem
</div>
<div id="halfRemBlock">
Foobar 0.5rem
</div>
Font Size Keywords (xx-small, x-small, small, medium, etc..) are based on the users default font size which is medium. It can also be used in the term of changing the size of a child element in relation to the parent element.
I think if you set a default size to a element like a container or the body, then any relative font-sizes in the children are based on the parent elements. Only if you don't specify a font-size anywhere does it just default to the browser (which they all have different sizes at that).