I have a template that has a lot of CSS formatting, but now when I try to add my text I cannot add any formatting to it. Within a paragraph, I try to put superscripts, italics, but nothing works. Is there a way around this?
Here's a little explaination about overiding CSS
I'll take for my example this simple HTML :
<div id='home' class='current'></div>
If you have, for example, a css like
#home{color : blue;}
.current{color : orange;}
The text will be blue since #home is "stronger"
If we put values to selector: id=10 class=5 node selector (div) = 1
so #home = 10 and is higher than .current wich equal 5, #homestyles will override.
you could use li.current but again, 5+1=6 wich is lower than an id.
But #home.current will equal 15! Wich will overide #home styles!
But if your color style is on the node itself within the attribute style="" you have to remove it with jquery or use !important :
.current{
color: blue !important;
}
It will override EVERY css but it is not recommended.
Note that the value i am using are not the exact one, so .parentClass .class will maybe not over an id and i can't find the original values... But keep in mind that the more selective you are, the more chance you have to override a style.
At last, if you have 2 selector with the same value, the last one called will be the one overriding.
Use chrome inspector or firebug to see what's overriding what.
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
Is it possible to tell a link not to change color in CSS and use the default one.
Example
I have a text in red and that text is a link too. Normaly that text will change blue because it's a link, but I want it to stay red.
So is there a global style for a:link to select no color at all ?
Try this in your stylesheet:
a:link {
color:inherit;
}
Note that you then probably should make sure you have some other way to identify links, or your users will be confused. (I.e. don't remove the underlining, too.)
If you want to deal with browsers not supporting inherit, I suppose repeating the definition which originally set your color will do.
As an example, assume the class important should be shown in red:
.important {
color:red;
}
.important a:link {
color:red;
}
But of course it is not nice to have to double all color indications. I assume one could do something in JavaScript (looping through all the a elements and giving them the right class explicitly). (I have no IE available to test this.)
If all of your a tags are contained within a paragraph tag you can just set the color of the a tag to inherit. You could also just set a style for all a tags to have whatever colour the paragraph tag has. A quick warning about inherit, there are older versions of IE which don't support it(IE7 and earlier).
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
Is it possible to tell a link not to change color in CSS and use the default one.
Example
I have a text in red and that text is a link too. Normaly that text will change blue because it's a link, but I want it to stay red.
So is there a global style for a:link to select no color at all ?
Try this in your stylesheet:
a:link {
color:inherit;
}
Note that you then probably should make sure you have some other way to identify links, or your users will be confused. (I.e. don't remove the underlining, too.)
If you want to deal with browsers not supporting inherit, I suppose repeating the definition which originally set your color will do.
As an example, assume the class important should be shown in red:
.important {
color:red;
}
.important a:link {
color:red;
}
But of course it is not nice to have to double all color indications. I assume one could do something in JavaScript (looping through all the a elements and giving them the right class explicitly). (I have no IE available to test this.)
If all of your a tags are contained within a paragraph tag you can just set the color of the a tag to inherit. You could also just set a style for all a tags to have whatever colour the paragraph tag has. A quick warning about inherit, there are older versions of IE which don't support it(IE7 and earlier).