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).
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.
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).
The issue I have is that when I copy a piece of html, i.e., with
<a>my link</a>
Then it will pick up the default style color on the page, which means, if I set tag style color:#f2f2f2, then it will pick that up and use it after paste.
To solve this problem, I wonder if there is a way that I could set the color:none or somehow, into each tag so that the color of the will always be the default color for that tag (for example, tag will be blue).
Let me clarify,
The reason I want to do this is that the piece of html text has default css color as red that is taken from a stylesheet, but after I paste it I do not want that style to be pasted , however, when I try that, it will, if I do that in certain phone devices. I was wondering if there is a way to set the style for specific tag to ONLY default color attribute value without modify it. For example, if default is blue for the other one, the font will change to blue not stay red.
HINT: Its especially obivously when you try to copy html into Google Mail Signature box.
Thank You
I'm not sure if I understand what you mean, but if you want to change the link color:
a {
color: red;
}
Fiddle: Fiddle
For your edited question, if you want the default style, just do:
a {
color: initial;
}
I'm also not sure what you mean, but to set a link color, use the css from Anonymous above.
You can also apply color properties to different states of links.
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Be sure you set these styles in an external style sheet, do not use inline CSS.
In example:
<a style="color:#000;">This is Bad</a>
You can use the CSS Keyword initial
Initially CSS didn't provide a "default" keyword and the only way to
restore the default value of a property is to explicitly re-declare
that property.
This has changed with CSS 2; the keyword initial is now a valid value
for a CSS property. It resets it to its default value, which is
defined in the CSS specification of the given property.
(https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions)
EG: a.unstyled {color:initial;}
However, in my testing it seems that the browser's 'initial' value for a link is black not the blue we're all use to so you may be better off setting it explicitly.
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.
I am currently building a website and as soon as I added a link <a> tag to a <p> word, it becomes transparent. There are two links on the main page, both are coded exactly the same, but one of the links is transparent? The html passes validation and so does the css. If I add the old school <font color> html property within the <a> the color shows up, but the words break apart on different lines. I know this way is obsolete, but no CSS is working right now? Help?
Make sure that the background color is not the same as the hyperlink colors.
For kicks, try this: <font face="verdana" color="green">[your-entire-hyperlink-code]</font>
That's not how it should be done, but just to test it. If you see text, then your background color and hyperlink color are the same and need to be changed.
Try adding a CSS selector for <a> tags within <p> tags. Something like the following:
p a {
color: #000;
}
p a:hover {
color: #1c1c1c;
}
This should make any <a> black by default, and a dark grey on hover. If this doesn't work, try disabling all styles save for the default browser style-sheet (like Hakre said).