how can I force an image to be aligned hard to the left, regardless of what css applies to the container it is placed in?
You could use !important on the style to increase it's precedence over other styles.
style="text-align: left !important;"
Or
#foo { text-align: left !important; }
However, this is considered bad practice. Ideally you should give your selectors the level of specificity required. Could you post up your CSS.
You need to apply a more specific CSS rule to that particular image, e.g. one that references the image by Id or use !important.
#idOfMyImage { /* Desired CSS here */ }
Here's a good (and humorous) overview of specificity in CSS
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
Related
I have a header image that I would like to change responsively. However is shows in CSS as element.style and overrides any CSS that I add. I read some answers on this forum, however I still do not understand what do I need to do to override this setting. I think that my theme manages this. I have code like this and I want to change background-image:
element.style {
background-image: url('https://imagelink.com');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(0, 0, 0, 0);
min-height: 499px;
}
EDIT: My main goal is to background-image responsive for smaller/bigger screens, because my page builder (wpbakery) does not have this option
The rules of priorities are the following:
IDs are the most important (#unique-element).
Classes come next (.multiple-elements).
Names come then (div).
The more elements you have, the most priority. Example: div span.highlight has a higher priority than h1.main-title (2 elements + 1 class VS 1 element + 1 class).
In case of the same priority, it's the latest defined (the one on the lowest line in your file) that matters as CSS rewrited the rules previously defined.
Exceptions:
Inline code (<div style="...">) overrides everything.
Adding !important overrides everything even inline code but is considered bad practice because as it's higher than style="", it's also not affected by any changes you could make from JavaScript.
Examples with a bunch of fish
CSS observes some rules to render the style and you need to follow them in order to manage your styles.
In general, CSS will render first rules with !important, then selectors more specific, and then the last processed (if your specificity is the same and without !important the last rule will be rendered).
A good practice is to increase specificity when you want to override something, you can read more about it here.
Given the following HTML code generated by a Google+ widget
<div id="widget_bounds" class="Yfd" style="width: 290px;">
What should I declare in my style sheet to override the width to be 100%
I have tried the following
Corrected typo
#widget_bounds, #widget_bounds .Yfd, #widget_bounds .Yfd[style], #widget_bounds[style], .Yfd{
width:100% !important;
}
and various combinations of to no avail.
Other options I have tried are
#widget_bounds, #widget_bounds .Yfd, .Yfd[style], #widget_bounds[style] .Yfd, #widget_bounds[style] .Yfd[style]{
width:100% !important;
}
#widget_bounds .Yfd[style]{
width:100% !important;
}
#widget_bounds{
width:100% !important;
}
.Yfd[style]{
width:100% !important;
}
From reading some comments I think the point has been missed that the HTML has been generated from a Google+ widget for which I only have the option to set pixel widths. I have a responsive designed website and I need to override the inline style to provide percentage widths.
Rather than down voting and voting to close a perfectly legitimate question I would appreciate it if someone is actually able to answer a difficult question.
update
As mentioned by #niels-keurentjes:
There are a few cases where an inline style can be over-ridden, such
as with the !important attribute or with user style sheets.
style="width: 290px;" is an inline style.
from http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm:
Inline styles have the highest precedence. That means they are going
to be applied no matter what. The only styles that have higher
precedence than inline styles are user styles applied by the readers
themselves.
For more about the cascade: http://www.w3.org/TR/CSS2/cascade.html
For this reason you can't overwrite it with CSS alternative use jQuery to reset this width:
$('#widget_bounds').ccs('width','100%');
The following one :
#widget_bounds{
width : 100%;
}
Better not to use !important cause it breaks the natural cascading in the stylesheets.
P.S. You should check the spelling. The id is named widget_bounds which is different than widet_bounds from your css definition.
It turns out that I was on the right tracks but it is impossible to have a Google+ widget that has a responsive design, The closest I could get to is having fixed width px values for different sized view ports.
An interesting discussion on this can be found here https://plus.google.com/+DustinStout/posts/CxL5k3EBd4x for anyone looking for a solution to this.
For example, if we need to set a div's font-size to 22px, is there a possible way to let the descendants of this div still inherit from the font-size from body? (or any inheritable style, thanks to #Sourabh for pointing out background is not inherited).
I think a key point is that so that we can change the style of body or some parent and let it pass through, even though there is an intermediate change of style. So preferably, we won't do it by:
body, #foo * { font-size: 16px }
#foo { font-size: 22px }
This is related to the case as described in How to solve flicker on iPad when event delegation is used? , where the -webkit-tap-highlight-color need to be set for a div, but the descendants of this div will be best to inherit what is above this div (the parent of this div).
I can use JavaScript to put the style of this div in a temporary variable, and then change the div's style, and then change the style for just the immediately children of this div to the value of that temporary variable, but then whatever that is set for the style of body won't get inherited by those children or their descendants.
No. In the DOM, a descendant element will inherit any inheritable CSS of the parent(s). You can 'reset' it back to match the parent item by declaring it again, but you can't do exactly what you are asking which is only changing the BODY style declaration.
Off the top of my head, the one solution I can think of would be not rely on pure inheritance from the body element but instead create a class and use it on all elements where you want to control aspects from one declaration. That still may be tricky due to CSS specificity, though.
If I'm understanding your question correctly, you could use a > combinator like so:
Working Example
body, #foo { background: yellow }
#foo>* { background: blue }
or like so:
Working Example2
body {
background: yellow;
}
#foo {
background: blue;
}
#foo>* {
background: yellow;
}
W3C background-color Stats
Initial: transparent
Inherited: no
All elements are transparent regardless of their parent's background-color. But that color is transparent so parent's color is visible on the child. So basically, if you want them to inherit color, you can't (not with CSS at least) (there might be a trick that I am not aware of). You have to specify the color for every element if you don't want it to be transparent.
The answer is not quite.
You can reset a property to its initial values by using the initial css keyword, which is particularly useful for these user-agent set styles (like -webkit-tap-highlight-color)
See this jsFiddle.
Note however that this isn't the value that would be set by default if the parent didn't exist, but literally the browser's default setting. In particular, body level formatting is not taken into account.
I've also included the default keyword, which is effectively the same as not including any font-size specifier at all - it goes up the cascade chain to find one that has a font-size specified, in this case on the element-name selector.
Can anybody explain what in reality do !important in css styles?
I when i lok on other site css sometimes they use it, but why? I'm not realy understending the !important "job" :D
Thank You...
The !important rule is a way to make your CSS cascade but also have the rules you
feel are most crucial always be applied. A rule that has the !important property
will always be applied no matter where that rule appears in the CSS document.
So if you wanted to make sure that a property always applied, you would add the !important property
to the tag.
So, to make the paragraph text always red, in the above example, you would write:
p { color: #ff0000 !important; }
p { color: #000000; }
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
More about this
More about this link 2
!important is a part of CSS1.
What is it?
!important overrides other styles that don't have it. Here is a basic order of priority for CSS:
Rules with !important
More specific rules
.classNameA .classNameB {} /* more specific */
.classNameB {}
The order of the rules
.classNameB {}
.classNameB {} /* takes priority */
Example
.classNameB .classNameA {
background-color: red;
}
.classNameA {
background-color: blue !important;
}
Despite .classNameA being more specific in the first rule, the background-color of .classNameA is blue because of !important.
Should you use it?
No, avoid it at all costs. Only ever use it if it's absolutely necessary and if you find yourself in a situation where it is, consider refactoring your CSS. The reason for this is because it's difficult to change your CSS when you have !important rules all over the place. It's also an indicator of bad CSS design.
Further reading
Smashing magazine - !important CSS Declarations: How and When to Use Them
CSS Tricks - When Using !important is The Right Choice
!important sets the priority on the css atributes. If you have two same CSS properties with some different values, one !important mark will set that priority as HIGH.
Normally, latter CSS declarations overrule earlier. So if you have declared, in the style sheet, a certain background color for a certain element, and the style block on the page itself, or an inline style, declares another background color for that element, the style block or inline style overrules the style sheet.
If you add !important to the declaration in the style sheet, that declaration is not overruled.
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}