How to remove underline from a link in HTML? - html

In my page I have put some links under which I don't want any line, so, how can I remove that using HTML?

Inline version:
yoursite
However remember that you should generally separate the content of your website (which is HTML), from the presentation (which is CSS). Therefore you should generally avoid inline styles.
See John's answer to see equivalent answer using CSS.

This will remove all underlines from all links:
a {text-decoration: none; }
If you have specific links that you want to apply this to, give them a class name, like nounderline and do this:
a.nounderline {text-decoration: none; }
That will apply only to those links and leave all others unaffected.
This code belongs in the <head> of your document or in a stylesheet:
<head>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
</head>
And in the body:
Link

I suggest to use :hover to avoid underline if mouse pointer is over an anchor
a:hover {
text-decoration:none;
}

Add this to your external style sheet (preferred):
a {text-decoration:none;}
Or add this to the <head> of your HTML document:
<style type="text/css">
a {text-decoration:none;}
</style>
Or add it to the a element itself (not recommended):
<!-- Add [ style="text-decoration:none;"] -->
Text

The other answers all mention text-decoration. Sometimes you use a Wordpress theme or someone else's CSS where links are underlined by other methods, so that text-decoration: none won't turn off the underlining.
Border and box-shadow are two other methods I'm aware of for underlining links. To turn these off:
border: none;
and
box-shadow: none;

All the above-mentioned code did not work for me. When I dig into the problem I realize that it was not working because I'd placed the style after the href. When I placed the style before the href it was working as expected.
<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>

The following is not a best practice, but can sometimes prove useful
It is better to use the solution provided by John Conde, but sometimes, using external CSS is impossible. So you can add the following to your HTML tag:
<a style="text-decoration:none;">My Link</a>

<style="text-decoration: none">
The above code will be enough.Just paste this into the link you want to remove underline from.

Related

On page CSS to override server added value

We have had a site re-designed by a company who also maintains and hosts it, as well as providing us with our CRM system. The issue I am facing is they add a bit of a backlink to the footer, which I am unable to edit as its not part of the page until the server generates it.
I would like to use On Page CSS to style this to white, or completley remove it. Either is fine
<span style="width: 100%; text-align: center; display: block; color: #999999; font-family: verdana; font-size: 7pt;margin-bottom:4px;">Powered by <a style="color: #999999;" href="http://www.prospectsoft.com/ecommerce" target="_blank">ProspectSoft eCommerce</a> and <a style="color: #999999;" href="http://www.prospectsoft.com/crm" target="_blank">CRM</a></span>
The above is the code I can see when I look at the source of the page in Firefox. I cannot see this code in the editor they provide, however I can edit the css files.
Is it possible to use on page CSS to style this out?
Well in my mind with pure CSS, no since there doesn't seem to be something unique to reference it by.
Alternate Solution:
If you can use Jquery it should be relatively easy though.
Do following in head:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$().ready(function () {
$('footer').child().hide();
});
</script>
Depending on the build of the page you should be able to isolate that HTML element. For instance, if that span is the only element in the
<footer>
tag, you could simply use:
$('footer').hide();
Note: They may already be referencing jquery, which means you could just do the code.
One More:
$().ready(function () {
$("a:contains('ProspectSoft eCommerce')").parent().hide();
});
Will delete all parents of anchor tags that contain that text though, so be careful.
EDIT:
$("span:contains('Powered by')").hide();
In line CSS will typical override stylesheets declared in the document head.
If you find certain properties remain stubbornly unaffected, try using the "!important" modifier.
Example:
color: #ff0000 !important;
Beyond this, I can't give you any further advice given that you haven't specified exactly what your problem is.
Not good looking but works:
div span, span a { color: #FFF !important; }
Bad thing is you would have to set the color to all other similar nests "div span" and "span a"

CSS Selector of nested classes

I'm breaking my head with this simple? problem. I know its not a bug nor a cross browser issue, tested on firefox and internet explorer. Simply I don't understand why its resolving this way.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.red_class { color: red; }
.blue_class {color: blue;}
</style>
</head>
<body>
<div class="red_class">
<a class="blue_class" href="http://somesite.com">Somesite</a>
</div>
</body>
</html>
In my humble opinion both rules have the same specificity so I expected the link to show in BLUE because the blue_class rule is closer, but the link is shown in RED. I actually changed the order so that the ".blue_class" rule was written first, but it didn't change the result
I have found some ways to make the code work, like making 2nd rule more specific, for example:
.red_class a.blue_class {color: blue;}
But I would really like to understand why this is not working as I expected, that is, if the link has a class blue_class it should be shown in blue.
Really appreciate the help. Thanks in advance.
Actually I don't see how you're getting a red colored link...
Anchor elements with defined href doesn't inherits attributes like color or text-decoration, so the result you're getting it's a little odd.
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.
So, this results in a default styled anchor:
.red_class{color:red;}
<div class="red_class">
Something
</div>
In this case the anchor inherits the red color:
.red_class{color:red;}
<div class="red_class">
<a>Something</a>
</div>
I really don't get the problem, but at least this is an explanation of how anchor styling works.
#Luxfer This is just a simple thing that I do. Download Firebug Addon for your Firefox. Inspect the element to which you want to give style. On the right side of Firebug, there is a box where you can see the CSS used. Simply Right Click on the CSS pane, there you will find an option as Add Rule. As you Click on that, it will take the selectors that will target the required element perfectly.
Are you certain it's not working? Blue is not a good color to test with because most browser default to a blue for hrefs.
<div class="red_class">
<a class="green_class" href="http://somesite.com">Somesite</a>
<p>More Text</p>
</div>
with
.red_class { color: red; }
.green_class {color: green;}
Seems to work fine in Chrome here.
----Demo-----

How can I prevent a bookmark from changing style when moving the cursor over it?

I have little experience with CSS so this might be a very simple problem.
I have a table of contents on my web page with links like this:
User interface
and somewhere else I have a bookmark like like this:
<a name="user-interface">User Interface</a>
Besides that I have a CSS file with the following style:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
The goal is to change the color and background color of the link when I move the cursor over the link, and that is working perfectly. But the problem is that the bookmarks are also changing style when I move the mouse pinter over them. It makes sense to me since both the link and the bookmark use the <a> tag but i cannot figure out how to distinguish both on the CSS. I know I could use a class for the link but I wonder if there is a better way.
<a name="..."> is deprecated.
Instead, you should just put an id="..." on any element.
To answer the question, add :link.
While the :link selector appears to work, according to W3Schools, it only applies to unvisited links.
(Edit: It appears W3Schools was misleading on this. The :link selector, in some browsers at least, will select <a> tags that link to something, visited or not, but the color attribute will be overridden by the browser defaults for visited links. Apparently the attribute selector, as detailed below, has a higher specificity than the default browser settings, so if you want to force your links to be the color you set, regardless of whether the user has clicked that link before or not, then the attribute selector should be used.)
One way to do this if you're not overly concerned with IE6, and have a doctype specified for IE 7 and 8, would be to use an attribute selector:
a[href]:hover {
color:#D090D0;
background:#803080;
text-decoration:none;
}
Outside of that, I think you'd be best off adding a class.
Use :link selector to select a link
a:link:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
http://jsfiddle.net/9r4L9/
Use a class:
In HTML, use the class attribute.
User interface
<a name="user-interface">User Interface</a>
In the css:
.foo:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
Now, the style is only applied to the elements having class foo.
Add a class to the bookmark and then add some style on it after the hover declaration:
<a class="bookmark" name="user-interface">User Interface</a>
and css:
a:hover
{
color:#D090D0;
background:#803080;
text-decoration:none;
}
a.bookmark {
color: black;
background: white;
text-decoration:none;
}

I want to apply an existing CSS style to all labels on a page. How?

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.

How to get rid the horrible rectangle arround <a> tag

I am developing a website and everywhere i have this annoying problem... I wonder how other sites dont have this problem... any suggestion?
stackoverflow has this problem as i see...
http://inath.gr/ this site for example at the top menu although it has <a> tags there is no rectangle arround it when selected somehow..
CSS outline property:
You can turn it off with:
<style type = "text/css">
a {outline:0;} /*this is that dotted line you get when you select an image, I believe you're talking about the outline*/
a img {border:0;} /*Images in links default to having a blue border, so this could be the source of another annoying rectangle*/
</style>
The following is considered better because it allows users to still navigate by keyboard.
Here is a link explaining why:
http://people.opera.com/patrickl/experiments/keyboard/test
a:hover, a:active { outline: none; }