How to make css not apply to certain attributes? - html

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.

Related

How to move css media queries to separate css file and import it in main css file? [duplicate]

I imported another stylesheet using #import in the main style sheet file. I would like the changes I have made in the #import stylesheet to override the main style sheet. Is this possible?
If your goal is to override styles by importing another stylesheet, you should use the order of precedence.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Here the style.css is the original and style-override.css would contain your new custom css. These styles will override the styles from style.css. This means you won't need to use !important because the style is overwritten.
Avoid !important whenever you can.
To do #import
<style type="text/css">
#import url("style.css");
#import url("style-override.css");
</style>
Also as a side note if you would rather remove all styles from the page, use a css reset.
<style type="text/css">
#import url("style.css");
#import url("reset.css");
#import url("style-override.css");
</style>
Check out a CSS reset at http://meyerweb.com/eric/tools/css/reset/ and add it to reset.css.
#import the second stylesheet at the end of the first.
You're confusing !important and #import
This solution working perfect for me.
Make copy of your main.css and rename it to style.css.
In main.css delete all and past :
#import url("style.css");
#import url("style-override.css");
Thats all.
If your second stylesheet uses the same selectors, then it should override the first without any problem.
CSS has a very strict order of precedence for determining which one should be used, but if all else is equal and two styles have exactly the same precedence level, then it will use the one which was specified last. This allows you to override a style simply by repeating the same selector later on.
The only exception to this is if the first style was specified as !important. In this case, it is much harder to override it. Even specifying another style as !important may not always work (I've seen cases where it worked in some browsers but not others).
So if the previous stylesheet used !important then you may have problems overriding it. But if not, it should be fairly simple.
You can also use more specific class name - for example if you want to change
div#sample {
max-width: 75%;
}
on new css use
body div#sample {
max-width: 75%;
}
Just keep in mind, that overqualified selectors are not the best idea ;)

change h1 color in css based on div class with space in it

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.

Use same named class from different css file

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;
}

Overriding Bootstrap default !important color codes

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.

CSS in HTML more important than in style.css

I have prepared a page in HTML. I can only edit the HTML file - I cannot edit the CSS.
In the CSS file, there is a colour declared: color: #fff000. I created a new style in the HTML file. However, the CSS file style.css is more important - when I add a new color in the HTML page, the style.css colour overrides it.
Is there any possibility to set that CSS in the HTML as more important than the colour declared in style.css, without editing style.css?
Inline CSS always takes precedence so if you put your styles directly on the HTML elements themselves, it should work:
<div id="title" style="color:white">Title</div>
This is acceptable, but not something I would do.
What I would recommend is making an overriding style sheet in the header of the HTML. This keeps the styling away from the HTML content, but you have to be sure to use the !important tag to override the specificity. Adding the !important tag is not 100% required, since internal stylesheet take precedence over external style sheets but it might be something to consider.
So, in the case of the earlier example, this would look something like:
<style>
#title {
color: white!important;
}
</style>
Hope this helps you!
Inline CSS has more importance than a style.css rule. Maybe someone has added !important in the CSS though, then that would override your inline CSS. To try this out, do a:
Link
You can use <style> element with scoped attribute like this:
<style scoped="scoped" type="text/css">
//Add rule here
</style>
It is possible to set the css in html like this:
<html>
<head>
<style type="text/css">
.more-important-style {
background-color: #352e7e;
}
</style>
</head>
<body>
</body>
</html>
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)