When I have set the font-family for html, body..
How can avoid restating the font-family for buttons, input, textarea etc.?
It seems to always default to some other font than my main font-family, on those elements
Setting !important does not help
And as I understand, setting the font-family on * is not advisable
You could avoid restating by simply setting them all in one go:
html,body,buttons,input,textarea,etc {
font-family: whatever font you want;
}
That's probably the simplest way if you're not using *
Related
Why Yahoo CSS reset is using font:inherit for below tags?
address,button,caption,cite,code,dfn,em,input,optgroup,
option,select,strong,textarea,th,var {
font:inherit
}
I guess it has to do with css inheritance that for some properties like font-size which might not be inherited by default (font is the css shorthand for the different font-* rules).
The inherit value is used to enforce inheritance of values or to make inherit values of properties which are normally not.
You can see on this fiddle that the first input does not inherit font properties, compared to the second one which has font: inherit.
Im importing an XML feed which has inline styles applied to its divs like:
face="Verdana"
I want to override this with CSS. Ive tried this:
#containing-div div {
font-family: arial !important;
}
But its not working. As 'face' is deprecated I'd hoped it would be overridden with the 'font-family' but it appears not to be. Given that I can't change the XML feed (I know I should be able to but just trust me!), how can I override this?
Thanks
Assuming that this:
face="Verdana"
is actually this:
<font face="Verdana">..</font>
(and it must be, right? There's no way it's <div face="">)
then you should use this CSS:
#containing-div, #containing-div font {
font-family: arial;
}
There should be no need for !important. The point is to select the font elements.
The problem might be the "XML" part. Can you set other properties with the #containing-div div selector, like background or border? If not, the selector might not match, because the ID is not correctly defined by the XML fragment or the namespaces don't match.
In my default style sheet, I set the default font like this:
body, div, span, ...
{
font:normal normal normal 13px Arial, helvetica, Sans-Serif;
}
which works great, except that when I add a 3rd-party control on the page, it's inheriting this font, which makes it not display properly.
If I wrap the 3rd-party control in a div, how can I remove/clear the globally set font, so that anything inside the div will act as if the font was never set?
The only way to prevent a rule-set from applying to an element where the selector matches or to prevent inheritance is to explicitly set a different value.
You cannot say "Inherit from an element that is not the parent"
You cannot say "Ignore the author stylesheet for this element"
So figure out what "display properly" means, express that in CSS and apply it to the third party content.
You'd have to give a class, or id, to the div containing the 3rd party control, and explicitly over-write the style rules for that container. Unless I'm missing something, if you set the default font for the body all children and descendants of the body should automatically inherit (you shouldn't need to specify div, span /* etc */).
But you can't specify a non-inherit rule, you have to over-write inheritance, sadly (though sensibly, I think).
Say if I set the font-family for the page body to font1, font2, font3 and then I set the h1 tag's font family to font4, font5. If font 4 and 5 weren't installed, would the browser try font 1,2 and 3 before it used the browsers default font?
No, because when you specify font-family, the font stack doesn't get inherited from the parent element and then added to. You're giving it a brand new font stack of its own, separate from its parent element's.
If you want the browser to use the first three fonts for <h1>, you need to specify that:
body { font-family: font1, font2, font3; }
h1 { font-family: font4, font5, font1, font2, font3; }
Tedious, but that's how CSS font-family works :)
Short Answer: No
Good question. The feature you are talking about is known as inheritance. Essentially, will a child element inherit a parent's font-family if its own specified font-family is not installed on the user's computer.
I couldn't find any explicit documentation although this specification could be taken to mean that no inheritance will occur in this case. Therefore, to make sure, I tested out the latest stable build of Firefox with the following:
<body>
<p>Hello</p>
</body>
body {font-family: Arial;}
p {font-family: Quill;}
I don't have Quill installed but I do have Arial. However, despite this fact, the p element is rendered in the default serif font, not in Arial.
Since there is at least one major browser that functions in this way, in order to ensure consistency, you should always use this instead:
body {font-family: Arial;}
p {font-family: Quill, Arial;}
Thinking more about this, one way to fix this would be to allow the following:
p {font-family: Quill, inherit}
p {font-family: Quill, default}
The second rule is essentially what browsers do at the moment, but only implicitly. If CSS allowed us to specify the last property explicitly, we could alter this behaviour. Unfortunately, this does not work currently. Anybody know how to submit suggestions to the w3C?
nope. it will default to the browser default.
Basically, I need to adjust the font type everywhere it isn't specified. How can I do that? table, div, span, p, input, you name it. Is there a way I can do them all with 1 CSS rule that I can add?
Yes there is, use it on the body element and it will cascade down to all children unless you specify otherwise.
body {
font-family: Arial, Verdana, sans-serif;
}
#tahoma {
font-family: Tahoma, sans-serif;
}
You can then override it
<body>
<div id="default">
I will inherit the body font-family, in this case Arial because no other rule has been set!
</div>
<div id="tahoma">
<p>Me, <span>Me</span> and <strong>Me</strong> are using Tahoma because our parent #tahoma says so.</p>
</div>
</body>
This is why it's called Cascading Style Sheets. Styles set at any level will "cascade" down. So if you set this styling on the body element, every other element in the body will take on the same styles.
body {
font: ...;
}
What's missing from the existing answers is the fact that the font family of some elements, like input, is unaffected by simply setting the font family for body, as suggested here.
The reason is that an element inside the body inherits the font family setting only if there is no rule that specifies this setting for this element. For elements like input (and also pre, code, etc.), there usually are rules that specify the font family: the basic styling rules defined by the browser.
To override the browser default, one needs to explicitly set the font family for these elements:
body, input, button, textarea {
font-family: ...;
}
Note that !important should not be necessary to achieve this. Using !important is a sign that the stylesheets were not designed carefully enough.
Use !important css property.
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
Like:
*{
YOUR_FONT_STYLE
}