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.
Related
I have added a custom font for this code. I am trying to get my h1 tag to inherit the font-weight:bold; css attribute.
In my css I have added the font-weight bold in the body tag where it should affect all the text. I have also tried placing it in the h1 tag in css.
The font-weight is affecting everything but the h1 tag. What is going on?
#font-face {
src:url(fonts/kohm.otf);
font-family:'kohm';
}
body{
background-color:silver;
color:white;
padding:20px 20px 20px 20px;
font-family:"kohm";
font-size: 14px;
font-weight:bold;
}
h1{
background-color:#ffffff;
background-color: hsla(0,100%, 100%, 0.5);
color:#64645A;
padding:inherit;
}
Ignore the question I found out that heading tags are already made bold so the font-weight:bold; attribute will not affect it. font-weight:normal; to un-bold it and adjust is font-size.
However when I am trying to italicize the font or make it oblique font-weight:italic; font-weight:oblique; it will not affect any of the text in the body paragraph. Why might that be?
You are using the wrong CSS syntax. You are using font-weight whereas you should be using font-style instead.
If you want to make the body paragraph italic, the correct syntax would be
p {
font-style: italic;
}
If you are trying to make it oblique, the correct syntax would be
p {
font-style:oblique;
}
I hope that helps!
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
I am using twitter bootstrap (TB) and it seems like their CSS Rules are taking precedence when they shouldn't. I created this fiddle to show the problem:
http://jsfiddle.net/whoiskb/Za2TB/
HTML
<div class="teaser">
<h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1>
</div>
CSS (plus an external link to twitter bootstrap)
div.teaser h1.teaserText {
font-size: 100px;
font-weight: 100;
color: black;
line-height: 90px;
font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial";
text-transform: uppercase;
}
div.teaser h1.teaserText label {
color: #FCCE00;
}
From what I understand about the specificity rules, the rules defined for label in TB should only get a value of 1 since html selectors get a value of 1. My class should have a value of 23 since I have 3 html selectors and 2 class selectors which should get a value of 10 each. As you can see in the fiddle though the label selector in the TB css definition is taking precedence.
Could someone explain what I am missing here?
BTW, I know I can use the !important tag to resolve this, I am just trying to get a better understanding of CSS Specificity rules.
Specificity rules only apply if different Rules target the **same element (as for your color of the label), not if different elements are targeted (even if some styles of that element would be inherited).
You have one stylerule applied to labels, and that is the color, which gets applied correctly. All your other styles are applied to another element, so the TB styles targeting the label directly are preferred of course.
Some styles are inherited (like font-size and line-height in your example), but they are overridden as soon as there is a rule targeting your element directly. TB overrides your font-size and line-height with the following rule:
label, input, button, select, textarea {
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
You could fix this easily by declaring:
div.teaser h1.teaserText label {
color: #FCCE00;
font-size:inherit;
line-height:inherit;
/* and so on */
}
I'm not exactly clear on what you think the problem is, but taking a guess:
CSS specificity decides what happens when there are two or more rules for one CSS property for a given element.
So, given this HTML:
<label class="myLabel">Hello!</label>
And this CSS:
label {
color: red;
font-size: 24px;
}
.myLabel {
color: blue;
}
The label will be blue, because .myLabel is a more specific selector than label.
However, the label will also have a font size of 24 pixels, because the .myLabel block doesn't include a rule setting the font-size property.
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
I have only a basic knowledge of css, is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags.
The reason I want to do this is to make it easier to maintain multiple styles.
You can define common styles for two elements at once like so:
p, a {
font-size: 1em;
}
And then extend each one with their individual properties as you want:
p {
color: red;
}
a {
font-weight: bold;
}
Keep in mind: Styles defined later in a style sheet generally override properties defined earlier.
Extra: If you haven't already, I recommend getting the Firebug Firefox extension so you can see what styles the elements on your page are receiving and where they are inherited from.
No CSS doesn't have any way to inherit styles. But there are several ways you can share styles. Here are a few examples:
Using multiple classes
<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>
p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Use the comma operator in your styles
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Using container elements
<div class="container">
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
</div>
div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
None of these are exactly what you are looking for, but using these techniques will help you keep CSS duplication to a minimum.
If you are willing to use server side code to preprocess your CSS, you can get the type of CSS inheritance you are looking for.
http://wiki.framwurk.org/documents:csspp/
http://mail.python.org/pipermail/python-list/2006-August/397266.html
http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer
Yes.
You should understand how the cascade in CSS works, and also understand how inheritance works. Some styles will inherit (like the font face) and some styles wont (like the border). However, you can also tell styles to inherit from their parent elements inside the DOM.
Of some help here is knowledge of how style rules are specified. This site about the CSS Specifity Wars might help (Note: this site is currently down, but hopefully it will be back soon).
Additionally, I find it sometimes helps to overload styles like this:
h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...
"...is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags."
The link tags will automatically use the fonts from the paragraph, if, and only if, they are within a paragraph. If they are outside of a paragraph (say in a list) they will not use the same font, etc.
For instance this css:
* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }
will generate links and paragraphs that are sized at .75em. But it will display links within paragraphs at about .56em (.75 * .75).
In addition to the specificity reference cited by Jonathan Arkell, I recommend the CSS Tutorial at W3Schools.
CSS will automatically inherit from the parent style. For example, if you say in your body style that all text should be #EEE and your background should be #000 then all text, whether it’s in a div or a span will always be #EEE.
There has been quite a bit of talk about adding inheritance the way you describe in CSS3, but that spec isn’t out yet, so right now we’re stuck repeating ourselves quite a bit.