This question already has answers here:
How to remove underline from a link in HTML?
(8 answers)
Closed 4 years ago.
I am looking for how to remove the underline from this bit of HTML
I tried this but have no idea where to place it in this line. (I am not a developer)
<span style="color:#15BECE;">Unsubscribe</span> from email communications<br>
Thanks, everyone!!
This is the bit that fixed my problem. I know this was very novice and appreciate your help!
<a style="text-decoration:none"><span style="color:#15BECE">Unsubscribe</span></a> from email communications</p>
You can use CSS to do this.
In the <head> tag of your .htm(or .html) file, add the following code:
<style>
a {
text-decoration: none;
}
<style>
For adding further styles, you can use styling on the tag:
<style>
a:link {
/*a normal <a> tag*/
text-decoration: none;
color: value;
}
a:hover {
text-decoration: underline;
color: /*Your desired color when cursor is on the link*/;
}
a:visited {
text-decoration: none;
color: /*Your desired color when link is clicked and visited*/;
}
a:active {
text-decoration: underline;
color: /*Your desired color when link is clicked*/;
}
<style>
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I have a link in a class like this:
<div class="brand">
amazona
</div>
And I changed link color and link:hover color like this:
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
It works perfectly. But when I change the link color in the div like this:
.brand a{
color:brown;
}
The link color is brown even I move the mouse over it. I expect the hover color to be red. Why does it happen? and how can I fix it?
To solve this problem first you need to understand CSS specificity (visit: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity).
And if you are using .brand a CSS is becoming more specific, hence on a:hover also you need to add more specific CSS like .brand a:hover
a {
color: green;
text-decoration: none;
}
a:hover {
color: red;
}
.brand a{
color:brown;
text-decoration: none;
}
.brand a:hover{
color:red;
}
<div class="brand">
amazona
</div>
I am going to take a shot at answering this because I feel it can be better clarified. As mentioned above, a deeper understanding of the CSS language is needed, specifically a deeper understanding of CSS selectors, and how they work.
CSS implements the code you write with in your style-sheet according to order, what was write first is computed first, what was written last is computed last, therefore; if you write:
.some-txt{
color: red;
}
.some-txt{
color: blue;
}
.some-txt{
color: razzle-dazzle-purple;
}
then the text with class some-txt is going to be the color, 'razzle-dazzle-puple'.
This is becuase razzle-dazzle-puple was the last color in the order of assignment given. In your code you gave the color brown to a after red, canceling your previous assignment. To fix this you either be more specific with your selectors like so:
.brand a:hover {
color: red;
}
or just simply try moving things around, I tested your code and I think what you were looking for is this:
a {
color: green;
text-decoration: none;
}
a {
color: green;
text-decoration: none;
}
.brand a {
color: brown;
}
a:hover {
color: red;
}
remember when you add hover to a property, you are adding it to the property, so when you change that property, after you already assigned it a value, you are change the whole property. I hope this makes sense, some things are hard to explain, obviously the best way to understand something is by playing with it.
Because you specified every single link in a .brand div has the colour brown.
You can do
.brand a:hover {
color: red;
}
This will work :)
.brand a style is overriding the a:hover style. if you exchange the order of the two styles in your style-sheet it will work.
This question already has answers here:
How do I get this CSS text-decoration override to work?
(7 answers)
Closed 8 years ago.
Can we Disable underline of inside span element of underlined anchor tag. If it is possible please tell me how?
<a>hello<span>praveen</span</a>
<style type="text/css>
a{
text-decoration:underline;
}
a span{
text-decoration:none;
}
</style>
Try this.
add display: inline-block; for span style
a {
text-decoration:underline;
}
a span {
text-decoration:none;
display: inline-block;
}
http://jsfiddle.net/4oqyx6Le/2/
a > span {
text-decoration: none:
}
This question already has answers here:
Underlining visited links
(2 answers)
How can I remove the underline of a link in chrome using CSS? [duplicate]
(3 answers)
Closed 8 years ago.
What is the CSS code that I need to write in order to remove the underline from these link after visiting them?
<ul id = "header">
<li> Home </li>
<li>Images</li>
<li>Videos</li>
</ul>
I tried this:
a:visited { text-decoration: none; }
but it didn't work.
Here is a fiddle showing the problem: http://jsfiddle.net/litari/X2Yjk/1/
You can't change text-decoration in :visited
Rather set text-decoration:none on anchors and text-decoration:underline on links you want underlined. For example you can use a class to achieve this.
a
{
text-decoration:none;
}
a.underlined
{
text-decoration:underline;
}
I think you should define the default state as well, so for example:
a:link { text-decoration: underline; }
a:visited { text-decoration: none; }
If existing code is not working for you then please add "!important" in your property.
a:visited
{
text-decoration: none !important;
}
Or try
outline: 0;
It might work on FF.
As mentioned before, changing text-decoration for :visited anchors does not work.
But you could do the following:
a {
border-bottom:1px solid #000;
text-decoration:none;
}
a:visited {
border-bottom-color:rgba(255,255,255,0);
}
This works fine for me: http://jsfiddle.net/Whre/N8c3A/
To test it using chrome inspect the anchor with the developer tools, rightclick the markup and say "Force element state" -> ":visited".
So I'm just trying to create a small website. (Don't worry that's not going
to be the title)
Right now the "Home" "News" "Gallery" and "About us" are not actual buttons that direct to another page. When I do
Home
The button turns into color purple and it is underlined. (I know this is how links are shown) But is there a way that I can make these buttons stay color orange like in the picture without them turning blue and underlined. Thanks
http://imgur.com/Czsk4
You can set the styles inline, but the best way to do it is through a css class.
To do it inline:
Home
To do it through a class:
Home
a.nav-link:link
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:visited
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:hover
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:active
{
color: #fb3f00;
text-decoration: none;
}
To do it through a class, you need to put the css code in a separate css file and link it in or you can put it in the head of the document. The best practice is to put it in an external css file so it can be used throughout.
If you want the orange to be on every link throughout, just remove the ".nav-link" part of the classes and remove the class="nav-link" from the link tag. This will make all links orange unless you have defined a another class and explicitly applied it to a link tag.
Good Luck!
Using CSS instead of inline styles will work much better:
a {
color:orange;
text-decoration:none;
}
You can also get fancier and have the underline appear when you hover:
a:hover, a:focus {
text-decoration:underline;
}
This can help improve user experience (UX), though if the links are in the header it may be naturally apparent that they are links. (UX design is more complex than this of course, because you have to consider things like touchscreen users that have no "hover". :) )
All links come with different states so if you want them to stay with just one color you can modify all the states together like so:
a:link, a:visited, a:hover, a:active { color: orange }
You can do that by using CSS.
to set this in your code right at the end of the head-section
<style TYPE="text/css">
a:link, a:visited, a:hover, a:active { color: #ff8080;
text-decoration: none;
}
</style>
and change the #ff8080 in your color
I have the perfect solution for you!
I'm copying and pasting straight from my code. make it relevant to you. This definitely works for what you are trying to achieve.
<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> Order Now
How can I change the colour of hyperlinks to white in HTML and CSS?
Use the color CSS property.
a { color: white; }
Problem is, visited links may not be shown as white as well. You may need to add extra rules:
a, a:hover, a:active, a:visited { color: white; }
You use CSS
a
{
color: #ffffff;
}
Anchor Pseudo-classes:
http://www.w3schools.com/CSS/css_pseudo_classes.asp
just guessing, you may be looking for these as well:
a:link
{
color:#FFFFFF;
}
a:visited
{
color:#FFFFFF;
}
a:hover
{
color:#FFFFFF;
}
a { color: #fff; }
in your css file.
I will add that if you're doing it to try and hide many white links on a white background of a page it is a very bad idea.
It can be done in following ways:
1) If you want to color of hyperlinks to white in HTML specific link, then use
Some text
2) To add color of hyperlinks to white in CSS from entire html page, Create a .css file, In that write following:
{ a, a:hover, a:active, a:visited { color: white; }
It will suppress color of hyperlinks white from every link.