What I want to achieve is to disable the Twitter Bootstrap class for my own input element with class named login_button. By default the bootstrap.min.css class is adding unnecessary properties like box-shadow etc. to my input.login_button element.
I know I can define box-shadow: none; but I wonder if there are other possibilities to achieve that?
Just override the Bootstrap style. As long as Bootstrap is included on your page before your custom CSS then your CSS should override Bootstrap as the specificity of the selector would be the same. Add this to your custom CSS and override the styles accordingly:
input.login_button {
box-shadow: none;
border: none;
line-height: initial;
/* Etc. */
}
Here input.login_button has a specificity score of 011 whereas Bootstrap's input[type="text"] only has a specificity score of 010, meaning your custom style will be strong enough to override Bootstrap's regardless of the order of your CSS.
You can't, except by modifying bootstrap.min.css. All you can do is overwrite the styles with more specific selectors.
Solution
The Easiest Solution in this case is that you can write !important with you own custom CSS lines and that will prevent bootstrap from adding any unintended styles.
Related
I've to remove the inline style of of the div element, can anybody tell me how to select that particular div, I've tried selecting class but inline style has more priority than class selector. Please tell me how to remove the inline style from it, I'm using WordPress and it is theme generated css.
This is one of those just because you can doesn't mean you should moments. Ideally, you should make a child theme and make your updates there. You can find plenty of help on how to make child themes in the WordPress docs.
That said, it is possible, but it's not best practice. This code will override what is in your current inline style.
/* this select a div with the class img-inner with the style attribute */
div.img-inner[style] {
margin: 2rem !important; /* anything you need to override needs an !important */
padding: 0 !important;
}
Once you have the div selected, you can pretty much do what you need. I just put in some declarations as an example. You can add more declarations or override/unset others.
If you need, you can use a more complex attribute selector to see if the style contains something specific.
Please try this -
.col-inner .img a.image-lightbox .img-inner.img-cover{padding: top: 77% !important;margin: 0 !important;}
I am using external style sheet more than one and internal css and also bootstrap predefined stylesheet. Now the problem is, I need 1 external style sheet would override all style sheets,internal css and inline css. how can i success it
You must use "!important" for your properties to override all styles
p {
padding: 10px !important;
}
There is precedence to css styling methods. Inline styles takes precedence over internal css (using <style></style> tags) and external css (using <link /> tag).
To force properties use !important keyword after your property value.
Example:
external.css
.home-page {
background-color: green !important;
}
PS: Check this question for more info:
What is the order of precedence for CSS?
You need to add/import external css which should override all the styles at the bottom. First add/import bootstrap, then add/import other css files, then your css file which should override others.
When Adding/Importing css files, order is important. The file you add/import at last will override the previous styles.
If something doesn't work as you expected, then give them important like this
h1 {
font-size: 25px !important;
}
In-line css rules always take precedence than other css rules/styles. In that case, you need to mark your rules with !important keyword.
There are several rules ( applied in this order ) :
inline css ( html style attribute ) overrides css rules in style tag and css file
a more specific selector takes precedence over a less specific one
rules that appear later in the code override earlier rules if both have the same specificity.
A css rule with !important always takes precedence.
Sourec: Details about precedence and css specificity is talked here
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.
If in my webpage, i have all the three css defined for a div
Inline
Internal
external
I know that browser first looks for 1)Inline then for 2)Internal and last, it looks for external css.
but i want to call only external css, how it would be done?? Can i do it through !important or there is any other way?
There is no difference between internal and external style sheets. Which styles are applied depends on:
Specificity
Declaration order
Inline styles are the most specific, then identity rules (#), then class rules (.), then element rules.
For two rules that have the same specificity, for example div .main and span.title, both rules apply, but the one declared last takes over when they specify the same properties.
The only way to circumvent the precedence is to use !important.
Best thing to do is to put everything into an external css file.
If you must have inline styling then make sure you only have ones that aren't already defined
in your external stylesheet. i.e Dont duplicate/override styling. e.g, if you have the following in your css file:
div { padding: 5px; }
then dont have the following inline styling.
<div style="padding-right:2px;" />
Just put it into the css file
div { padding: 5px 2px 5px 5px; }
Like you said, you can use !important if you have to override a styling for just one page that doesn't apply to the other pages in your site.
1)Inline then for 2)Internal and last, it looks for external css.
No. There is no difference in priority between CSS included with <style> and CSS included with <link>.
but i want to call only external css, how it would be done??
You cannot cause CSS included via <style> or CSS included via the style attribute to be ignored.
Can i do it through !important or there is any other way?
You could apply !important to every rule and then hope that no rule included via <style> or style also has !important… but that way lies madness.
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;
...
}