I have a simple div in an anchor tag and I am trying to remove the blue underline from the link.
.removelinkdefault {
color: black;
text-decoration: none !important;
}
<div class="removelinkdefault">Reilly Lawless</div>
All documentation I have seen says to use text-decoration: none; however it does not appear to be working:
What am I doing wrong and how do I fix it?
Try adding the class="removelinkdefault" to the link (a) instead of the div
.removelinkdefault {
color: black;
text-decoration: none;
}
<div>Reilly Lawless</div>
Also, now you don't need !important
Remove the underline from the anchor element rather than the div:
a {
text-decoration: none;
}
Links are the <a> tag, not the <div>
a {
color: black;
text-decoration: none !important;
}
<div class="removelinkdefault">Reilly Lawless</div>
Related
I'm new to HTML and CCS. I would like to have an invisible link but I don't want to set the style of 'a' tags directly, instead I would like to set the style of its parent element so that it becomes invisible.
This is what I tried:
div {
color: white;
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
It doesn't show the text inside the 'a' tag, but it still shows a box around it, how I can get rid of that box?
I guess you are talking about the outline box.
You can remove it with:
div{
color: white;
border: none;
}
a, a:focus{
color: inherit;
border: inherit;
outline:none;
}
a:link{
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
You should add this CSS property to hide the outline in all your link elements :
a, a:focus {outline : none;}
In the other hand, if you want to make an element invisible, but still be able to receive click interactions on it, you can play with the opacity CSS property (setting the font color to white is not an elegant solution)
a{ opacity:0; }
The 'box' around your link has a default outline property defined. Be sure to include outline: none; to any element or pseudo-selector that includes this treatment.
div {
color: #ccc; /* for testing purposes*/
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
outline: none; /* removes outline */
text-decoration: none;
}
<html>
<body>
<div><a href='#trap'> inherit </a></div>
</body>
</html>
a:focus {
outline: none;
}
Is that what you are looking for?
I'm a bit confused why you are trying to make a link that is invisible in the first place, but the box you are referring to is most likely the focus box. Typically used to make it easy for the user to know what they are selecting and is good for accessibility-- it's usually not recommended to remove.
You can though by adding the code below.
a:focus {
outline: none;
}
How can I make the decoration text in the <p> tag not to be overwritten by the <a> tag?
a {
text-decoration: none !important
}
#paragraph {
color: black;
}
<p id="paragraph">this is a link</p>
My problem is that I want the text color p is black, not blue.
I found this one but no useful
How to remove the underline for anchors(links)?
Please guys explain this. All helps are appreciated.
The best way is to use inherit, so it will depend on the parents property.
a { color: inherit; text-decoration: inherit }
In the <style> tag, change a with p > a
p > a {
color: black;
text-decoration: none;
}
Working demo: https://codepen.io/FedeMITIC/pen/GyXQax
CSS reference about selectors: https://www.w3schools.com/cssref/css_selectors.asp
a { text-decoration: none !important; color: #000;}
This will remove your colour as well as the underline that anchor tag exists with
a
{
text-decoration: none ;
}
a:hover
{
color:white;
text-decoration:none;
cursor:pointer;
}
In the existing CSS file, we have:
a:link {
text-decoration: none;
color: #0486d9;
}
a:visited {
text-decoration: none;
color: #0486d9;
}
Which is fine, but I don't want that style in all cases. For example, for this link, I want it always white and underlined:
<a id="someId" class="GridviewSort" href="...">Date</a>
I thought this would do it:
.GridviewSort a:link {
text-decoration: underline;
color: white;
}
.GridviewSort a:visited {
text-decoration: underline;
color: white;
}
But it's not. The original style remains. What am I doing wrong?
EDIT:
Thanks, stybl. For some reason the original blue is still being dominant. But the Underline is working! Here's what's happening:
EDIT 2:
Ok, further up in the same style sheet is this:
a {
color: #0486d9 !important;
}
Which is still forcing the link to be blue. I don't want to change or remove this line because of the impact it might have elsewhere in the site. Is there a way to override this one too?
.GridviewSort a:visited targets <a> tags that are children of elements with the GridviewSort class. What you want is to target <a> tags that have that class.
This should work:
a.GridviewSort:link {
text-decoration: underline;
color: white;
}
a.GridviewSort:visited {
text-decoration: underline;
color: white;
}
Note: if you intend to have the same exact style for both clicked and unclicked links, you can shorten it like so:
a.GridviewSort:link,
a.GridviewSort:visited {
text-decoration: underline;
color: white;
}
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important
I've got the following.. http://jsfiddle.net/JcLx4/31/ how would I change the properties of the hyperlinked text in this example from blue and underlined to black and not underlined?
At a very basic level, like this:
a:link
{
color: black;
text-decoration: none;
}
To make it specific to links within your custom tag (incorporating display:block to make your link stretch the width of its container):
ab.s a:link
{
color: #000;
display: block;
text-decoration: none;
}
And to change the hover style:
ab.s a:hover
{
background-color: #000;
color: #fff;
}
If you want more information there is a tutorial on this page that explains the different pseudo-classes.
ab.s a{
text-decoration:none;
color: #000;
}