Let's say that I want to specify Arial in the HTML header - and I want it to apply to everything.
Do I have to list each element type explicitly? Or can I set them all with a single statement?
You can use the * selector which applies to everything:
<style>
* {
font-family: Arial;
}
</style>
Note that this may be overkill for your purposes - due to the nature of CSS, styles set on parent elements are generally inherited by child elements, and thus, it's usually enough to set a font style on the body element to apply to the entire page.
body {
font-family: Arial;
}
No, generally specifying it on body is enough. That’s what the C in CSS is for: cascading. That means elements inherit the properties of their parent element. So anything under body (which should be everything) will inherit the font automatically.
body { font: 12px Helvetica, Arial, sans-serif; }
I prefer
body {
font-family: Arial;
}
and let it cascade down. This has the advantage of not stomping on explicit font selections further down the tree. If you want to stomp, use the * form in other answers
Related
I run into a situation where I need to override font-weight property. However, even though I use !important to increase its priority, it still gets overridden by other styles. As you can see in the following example, I am expecting hello world to be bolded, but it is using font-weight: normal instead. Any ideas? Thanks
body {
font-weight: bold !important;
}
div {
font-weight: normal;
}
<div>Hello World</div>
You can consider the universal selector if you want to make your font-weight to apply on the div and also other tags. (as i suspect you want to make all the page bold)
In your case you are appling the style to body and not the div element and style of child element always override the parent style even with the use of !important. So this rule will only work with element that inherit the font-weight from the body.
body *{
font-weight: bold !important;
}
div {
font-weight: normal;
}
<div>Hello World</div>
This has to do with binding priority of the styles. A way to resolve this is to make the rule more specific, e.g. by targeting body div instead:
body div {
font-weight: bold !important;
}
div {
font-weight: normal;
}
<div>Hello World</div>
However, please don't do this unless absolutely completely unavoidable. !important is a hack at best. If you are in control of the HTML, just introduce a class or use a more relevant selector.
Suppose I have no choice but to use absolute font-size value, e.g. font-size: x-large;. According to many articles, the exact font size of such an element depends on user's preferences. My question (maybe silly) is: can I force some custom value instead of user's preferences as a base?
E.g. I have a given HTML document with absolute-size values, and I want to render it inside of an iframe (under same domain) with some configurable value as a font base. So that elements with font-size "x-large", "medium", "small", etc. change their real font size according to this base value. It might be useful e.g. just to demonstrate how these font values work. Can I achieve this at all? And how? Maybe there's a specific property in window object like "window.fontSizePreference" - who knows...
If an absolute value has already been declared, and you want to simply replace it using a length value, you have a few options.
Possible Solutions
Override the CSS by being more specific. If your code is declaring the value using:
div.xlarge {
font-size: x-large;
}
You could add another CSS selector to target that div, and CSS would use the more specific of the two values. For example, you could add body or the parent container:
body div.xlarge {
font-size: 12px; /* This would overwrite the x-large value above */
}
div div.xlarge {
font-size: 12px /* So would this */
}
.parentclass div.xlarge {
font-size: 12px; /* And this */
}
For the sake of the example, I'm using a div with a parent div and a parent with the class name of .parentclass. You could also use span, p, li, ul, a, etc.
Note: Learn more about Specificity from MDN.
You could also add styling inline to the desired target. For example, if your HTML is:
<div class="xlarge">My Text</div>
You could add inline styling like so and it would override the font-size CSS declared value:
<div class="xlarge" style="font-size: 12px;">My Text</div>
The last thing I'd recommend, is using the !important tag to override CSS values you couldn't otherwise target using the above methods. Assuming there is no other !important declarations, the last !important will force the CSS value.
div.xlarge {
font-size: 12px !important; /* Will override more specific CSS & Inline CSS */
font-size: x-large; /* Would be ignored */
Note: Learn about using !important from CSS-Tricks.
IFrames
None of these solutions will work with just CSS if you are trying to edit an iframe, unless you have control of the iframe content. For editing iframe CSS, just do a quick search on Stack Overflow and there are a number of solutions.
My main HTML formatting is controlled by the
<P>
tag.
My application is dynamically constructed HTML using HTML fragments stored in a database, and block of text are encapsulated in tags, and thus pick up the default CSS styling for the tags. However sometimes erroneous extra tags get inserted like tags which will then negate the styling. The problem is that these extra tags could be anything, so it is difficult to construct a rule for every scenario. So what I need is a CSS rule that will apply to any text within it regardless of other existent tags.
So normal situation:
<style>
p {font-family:arial}
</style>
<p>this would render as arial</p>
<p><span>problems here</span></p>
<p><span style="font-family:calibri">problems here definitely, need to have paragraph rules imposed here ie overrule span font rule</span></p>
So I would like to know how I can get the paragraph CSS rule to overrule all child tag css rules.
Possible?
Thanks in advance.
/* Any tag inside p */
p * {
font-family: Arial !important;
}
If you know specific tag, like span, then
p span {
font-family: Arial !important;
}
inheritvalue reference
Test page
This has the advantage that it will inherit any font properties which are set by the parent element thus p. The !important is only needed when it concerns inline styles to be able to overide it.
All properties
p * {
font: inherit !important;
}
Or specifically one property
p * {
font-family: inherit !important;
}
Try this;
p {
font-family: arial;
}
p * {
font-family: inherit !important;
}
jsFiddle
NOTE: IE 7 or minor versions do not support inherit value
I am hacking away at a wordpress theme and do not wish to make changes to the main stylesheet, style.css, so all changes need to go into style-custom.css
The stylesheet applies a font-family style to a certain class, but I want that class to defer to the globally defined font.
So this is how the inheritance is working:
style.css:383
div#main-superfish-wrapper ul {
font-family: Georgia,"Times New Roman",Times,serif;
}
style.css:10
body {
font-family: Droid Sans;
}
in style-custom.css, I simply wish to cancel out the style defined at style.css:383 and revert to the original definition at style.css:10. I don't wish to redefine the font-family.
Is this possible in straight css?
Yes, just use the inherit keyword:
div#main-superfish-wrapper ul {
font-family: inherit;
}
If I add a style like:
* {
font-size: 14px;
}
and later I define for an element:
#myElement {
font-size: 18px;
}
The fist one will override the second one.
Is there a way to define the first one, such as the second one will override it, and the 14px size will be applied to all the elements that don't define a size?
(I would like alternatives to the use of classes)
The element #myElement will override the first rule as it is more specific. If #myElement has children then the children will match the global selector. Try setting the rule on body.
Use !important
#myElement {
font-size: 18px !important;
}
It's worth noting that in your example if you specifcally set a style on that element, be it a class or id, it will inherit properties but any specific styles it will overwrite. So doing the above is pretty pointless. This can be demostrated like so:
<style type="text/css">
* {
font-size: 60px;
}
#blah2 {
font-size: 14px;
}
</style>
<span id="blah1">i'm default size</span>
<br/>
<span id="blah2">i'm specially 14px</span>
fiddle: http://jsfiddle.net/garreh/3YuLD/
No, the first one will not override the second one. A selector with an id is more specific than a selector with an element, so the second will override the first one.
To override a rule you just have to make a rule that is more specific. Just count the number of id, class and element specifiers in the selector, where id is most specific.
You can read more about selector specificity here:
css.maxdesign.com.au/selectutorial/advanced_conflict.htm
The second rule should override the first one. Make sure your element has id="myElement". Use an inspector (such as Firebug or Chrome's Web Dev Tools) to see what styles are applied to your element an which are overridden.