I want to use a class. The problem is I have two CSS files containing that same named class one in first.css and another in second.css my order of linking the css files is like this:
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="adminlte.css" />
adminlte.css is used for my interface but I like the look of the bootstrap forms. Whenever I call the class form-control it is styled by adminlte.css.
How can I call the class form-control but use the one from Bootstrap?
Note: I cannot switch the order of linking the css files.
You cannot specify which version of a class rule to use except by load order or by specificity. Since Bootstrap uses standalone (not nested or stacked) selectors, you can't compound class selectors to increase specificity. This leaves local overrides as your only recourse.
Grab the CSS block from the library file and drop it into your document using a style tag:
<style>
.form-control {
...
}
</style>
Embedded styles override linked stylesheets, so even though the selectors are identical this one takes precedence.
Would #media queries eliminate the need for two stylesheets?
#media only screen and (max-width: 768px){
#my_div{
/* style */
}
}
#media only screen and (min-width:769px){
#my_div{
/* style */
}
}
As you written one question below your main question about !important if you see this thing in second css which is overwriting your first one.
Because !important will always overwrite normal css.
as you didn't mention exact thing i will suggest you to take first link after second one and which element css you want to apply give that properties !important like below example. below given is just example not your exact need it's just to explain you how it works.
.example{
font-size: 16px !important;
color: red !important;
}
Related
I am currently trying to change the color of a title by referencing a div's class.
So far I have tried:
.pagetitle-title.heading {
color: purple;
}
<div class="container">
<h1 class="pagetitle-title heading">IT•ONE Method</h1>
</div>
And even:
h1 {
color: purple;
}
As mentioned per my comment, it looks like a classic case of "CSS overwrite". One of the "hacks" to avoid this, is to use the CSS property !important to tell the browser which CSS rule is particularly important, and should not be overwritten.
Example: color: purple !important;
CSS applies the style in the fashion that it is loaded. So if you have 1 CSS file with x rules, and a 2nd CSS file with y rules, and they both target the same elements, then the CSS file that was loaded last will generally overwrite the styles of the one prior.
The order is known as the top-down rule, and is only overwritten by the !important property and in-line CSS. The !Importantproperty will generally overwrite any in-line CSS.
Given the information about the top-down rule, and you have the means to edit the CSS and/or choose the order of how the CSS is loaded, you can make sure that you are able to apply your own CSS rules by having them load as the last included file in your project.
Example:
<head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>
In case these 3 files have rules that applies to the same elements, the loadedlast.css file is the CSS that will overwrite the ones prior, except in the case of the !important property and in-line CSS. By managing the order of your CSS, you can avoid having to resort to such "hacks" as using the !important property.
Check your link "stylesheet" for your CSS
Open you debug console and identify your h2 to see if CSS option are targeted
Try another hexa color code
Add "!important" after touy color code
color: purple!important;
I see your code and it's correct method to modify this color so... Try my checklist first and give us your feedback.
I would avoid adding important as much as I can. I would just go higher up the parents and try to target the div as specific as I can. Instead, I would go
.container h1.pagetitle-title.heading {
color: purple;
}
If that doesn't work only then I would use important.
I'm using Bootstrap and trying to develop this website. Particularly using their bg-primary category, which sets the default color to a royal blue. However, I need the color to match a teal on the "subscribe" button. However, as you can see in the inspection, the color of the card background has a default setting of the blue with an important tag.
My CSS to change the bg-primary color can't override the natural color Bootstrap set because they placed the important tag on it (even my important won't override theirs).
.bg-primary {
background-color: #3292a6 !important;
}
How do I go in and irrevocably remove Bootstraps default !important tag to the .bg-primary class?
You will have to override a lot of things ( `:hover' and 'disabled' among others) I'll suggest creating a new css class:
buttonColor {
border: none;
background-color: black;
color: white;
padding: 10px 20px;
}
buttonColor:hover {
cursor: pointer;
background-color: white;
color: black;
}
Try:
.card.bg-primary {
background-color: #3292a6 !important;
}
Here's why:
With CSS (Cascading Style Sheets) there is a concept called "specificity." My above rule will work because it uses two classes (.card & .bg-primary) instead of just 1 class (.bg-primary).
In general, to override bootstrap classes, I make my css rules more specific by adding a class in front (Note: this won't magically work, especially with Bootstrap nav! You have to inspect the styles, see which bootstrap rules are applied and create an even more specific rule. This can be tedius, and there are probably better, but more complicated ways.)
There are two common approaches.
If you want to only override it in a few places, then Jesse Phillips's primacy solution is best, but if you want to globally over-ride it and you have direct access to how the header is parsed, then you simply need to make sure that your CSS rule is included later in the document than the Bootstrap
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/customStyle.css">
then all you have to do is add an !important tag to your rule that matches the class you want to override.
EDIT: A third option I sometimes see people recommend is to save the bootstrap.css locally to your server and remove the !important tag there, but this in not a good idea because you will loose this change if you ever try to update your bootstrap to a newer version.
You would simply have to over ride the class with your own bg-primary class adding the !important tag there as well.
See this SO - How to override !important?
This Mozilla post - -https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_to_override_!important
Two solutions that I don't see here yet:
Don't use Bootstrap. Learn how to write your own CSS.
Remove the class that is adding !important from the HTML element and re-write it in your own CSS files.
Fixing !important with more !important tags is not a way to write good CSS. Kill the source.
I am working on a plugin for a wordpress page and in the theme it's going in, there is a style.css for that theme. In that style.css there are CSS attributes that apply to all img and p tags and that is messing up the appearance of my plugin. How can I make it so my plugin, which has its own stylesheet, ignore the style of the theme's css?
Include your stylesheet after the style.css
So:
<link rel="stylesheet" type="text/css" href="/path/to/style.css">
<link rel="stylesheet" type="text/css" href="/path/to/yourStylesheet.css">
If this still is not working use !important, but try to avoid this.
!important is placed after the style rule, like so:
p {
color: red !important;
}
You can also use more specific styles like #SarahBourt said.
#news-item > p {
color: red;
}
Craete a new CSS file and include your stylesheet after the default bootstrap css file, your styles will override the bootstrap styles
If still you are getting some problems you can also use !important next to that style
!important will ensure that your style will be given first preference
Ex:
p{
display:inline-block !important;
}
You can place styles in your stylesheet specifically to override the theme's styles.
Assuming your stylesheet is loading after the default theme stylesheet, then you can do the following.
In your web inspector, find the offending style in the theme's stylesheet. Copy it into your stylesheet, and replace every value with 'initial' to reset it to the defaults, or with your custom styles if that's more appropriate.
If your stylesheet is loading before the theme's styles, then you can still override the theme styles, even if they include !important. To override !important, create a more specific selector than the theme uses (Read about CSS specificity to figure out the best way of doing this), and add !important only to those which have !important in the theme style. If the style you're overriding doesn't use !important, just use the more specific style, as including too many !important tags can make it harder for you or someone else to modify your code later, as you're experiencing now.
In addition, you want to be sure that your overrides only get applied to your plugin, and not the rest of the site. So, wrap the plugin with a div or other element if it isn't already, and give the wrapper a unique class or id, e.g. class="my-plugin". Preface all of your overrides with this class to avoid breaking other areas of the site.
HTML:
<div class="my-plugin>
<!--plugin HTML-->
</div>
CSS:
.my-plugin img {
//override styles
}
.my-plugin p {
//override styles
}
Overriding original styling like this can get messy, but sometimes it's the only way to get things done when you don't have access to the other .css files. Just do the minimum necessary to make your styles more specific and you should be okay.
when I put css in <style></style> tags directly in the HTML it trumps any css in a file loaded with:
<link href="foo1.css"rel="stylesheet" type="text/css" />
But I don't want any inline styles in the html. So I moved the css to a file named foo2.css and have:
<link href="foo1.css"rel="stylesheet" type="text/css" />
<link href="foo2.css"rel="stylesheet" type="text/css" />
I also tried:
<link href="foo2.css"rel="stylesheet" type="text/css" />
<link href="foo1.css"rel="stylesheet" type="text/css" />
changing the order. But it doesn't seem to work. How can I tell the browser to treat foo2.css just like it would inline style?
Don't use !important
You will regret it later. Instead, use stronger selectors.
.weakSelector { }
div.strongerSelector { }
#strongSelector { }
div#superStrongSelector { }
html > body > div.wrapper > div.content > section > article > p > a:link#superUltraMegaStrongSelector { }
If you use identical selectors, the stronger selector is the one that appears later in the document.
Use developer tools (hint: hit F12 in any browser) to see what selector is winning, and make your selector stronger.
The "Trace Styles" tab in IE's dev tools is particularly useful for identifying the stronger selector:
Chrome's dev tools will also show you where styles come from, but you sometimes have to scroll around and hunt for it.
And, of course, there's firebug (HTML > Style > Show applied styles) but no more screenshots... you get the idea. ;-)
you put !important before the semicolon in your CSS document
div {
width:100px !important;
}
This will override all CSS including inline.
!important should only be used as a last resort. The real goal should be to increase the specificity of the foo2.css styles because that's how the browser decides which style to use.
Without seeing your code it's impossible to say for sure, but you could likely just add a prefix before every style in foo2.css with a .container class if you have one or if there isn't a consistent container then you could prefix all styles with body so they're more specific than the foo1.css styles, forcing them to be used.
Using !important or a generic prefix isn't the best way to build a new site but if that's the easiest way to remove inline styles the tradeoff is worth it for the huge maintainability improvement while allowing the browser to cache your styles.
If your inlined styles are like:
<section style="text-align: left; width: 50%; float: right;">
blah
</section>
I'd add generic classes in the HTML code:
<section style="txtleft w50 right">
blah
</section>
and matching CSS helper rules:
.txtleft {
text-align: left !important;
}
.w50 {
width: 50%;
}
.w200p {
width: 200px;
}
.right {
float: right !important;
}
No more strict separation of structure and style but it's still way better than inline styles and classes are self-explaining (you see both structure and main styles by reading your HTML code, updating styles is as simple as removing/adding classes in it).
I add !important on .txtleft and .right because the intent is pretty clear: if I add one of these classes, I DO want the relevant instruction to be applied else I wouldn't add it, simple as that. Without !important, any selector more specific than a class (or as specific as a class but written after these rules) would be applied instead of these ones.
.w50 is a different case: by experience, you may need to override width for lesser versions of IE or in #media rules for Responsive Web Design so adding !important would force you into adding it everywhere and you'd back into adding more and more specificity... Meh.
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.