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
Related
I have an anchor tag styled with
text-decoration: none.
This has removed the underline from my links, which is what I want.
However after the link is clicked, little bits of the link underline appear under the spaces between the icons in the link.
I have something like this
<a ng-click="toggle(this)" style="text-decoration: none">
<i class="fa fa-caret-down" ng-if="!collapsed"></i>
<i class="fa fa-folder-open-o" ng-if="!collapsed"></i>
<i class="fa fa-caret-right" ng-if="collapsed"></i>
<i class="fa fa-folder-o" ng-if="collapsed"></i>
</a>
(Using font awesome icons)
The underline is appearing just under the blank space between the icons.
Is there any way to get rid of that link underline for once and for always?!
That is because the default CSS values for links are declared by different browsers. A link has 4 official states.
Normal
Hover
Active (On mouseclick)
Visited
(Focus)
In CSS you can declare the style for each of these. If you want the link not to display the text-decoration in these states:
a, a:hover, a:active, a:visited, a:focus {
text-decoration:none;
}
Answer to your comment
Yes, you can replace the a with a classname. For instance, you have a link with the class 'myLink'.
You can make the CSS:
.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus {
text-decoration:none;
}
The right way and you should cover this by adding the following css in your style sheet definition:
**Longer CSS Styling definition:**
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
**Shorter CSS definition:**
a, a:visited, a:hover, a:active {
text-decoration:none;
}
this will ensure no underlining in all state of links to be absolutely sure that there will not be underlining in any of the links on the page. You can also condense the styling definition in your css so the code isn't long and it's more efficient to control style for all link behaviours because it applies to all of the links on the page when you're defining a
if you want to style it for specific links you'd do the following:
a.nav:link {text-decoration: none; }
a.nav:visited {text-decoration: none; }
a.nav:hover {text-decoration: none; }
a.nav:active {text-decoration: none; }
styled links.
or something completely different adding in colours, overline, font weight, size which are going to be different in each link state for that specific class.
a.external:link {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.external:visited {color: #894f7b; font-weight: bold; }
a.external:hover {text-decoration: overline; background-color: #003399; }
a.external:active {color: red; }
You're using the wrong property... text-decoration-line is not meant for this.
The text-decoration-line property specifies what type of line, if any, the decoration will have
Use text-decoration: none instead
<style>
a{text-decoration:none}
a:visited{text-decoration:none}
</style>
Add a stylesheet to your project
I want to create a hyperlink that doesn't change the text when I hover over it.
I've created a special style for that type of link as follows:
a.blank:hover{
text-decoration:none;}
and the link itself:
<a class="blank" id="asdf">asdf</a>
I also have a general hyperlink style:
a:hover, a:active {
text-decoration: none;
color: #321dd3; }
I know I could get around it by defining the text colour as being the same, but is there an umbrella method to force the hyperlink not to change anything?
There are libraries such as reset.css (And more like it) that will remove these styles, but that may affect other parts of your page. It's best to use
a:hover, a:active {
text-decoration: none;
color: inherit;
}
You will also need to add a{text-decoration: none;} and define the color property (That's what's inherited) for its parent element.
Fiddle: http://jsfiddle.net/VhCf8/
I have taken the links dynamically which are coming in a list. When i click on the link, in other container its page opens. I want to change the visited link color.Basically the block background color. I am able to change color on click. but i need it will stay as it is until n unless i refresh the page. I used
ul
{
list-style-type: none;
margin:0;
padding:0;
text-decoration:none;
display: block;
}
a {
text-decoration: none;
display: block;
}
ul li{
padding-bottom: 10px;
text-decoration: none;
}
li:hover {
background-color:#7EA5E4;
}
li a:visited, a:active{
background-color: #09F;
}
Please suggest me where i have to do changes.
That is, what :visited does. But you "block" is the list item, which can't be visited, because it isn't a link. Style you anchor as block by moving the appropriate styles from the list item to the anchor. That way you also could style the background.
You could try something like, changing the colour / font family to suite you
.Link A:visited {
text-decoration: none;
font-family: arial,sans-serif ;
color: #fff;
}
The .link is a custom class
Hope this can help,
Thanks,
Jack.
i hope you are looking like this:- http://tinkerbin.com/VsbhpxGi
you just have to make .active class and define in li
like this :-
li.active {
background-color:#7EA5E4;
}
UPDATED ANSWER
i hope you are looking like this if you will click on any link so that link will be active...... see the updated answer...
http://tinkerbin.com/Fm0lRO8Z
I want to apply a different hyper link style to the following two things:
Any links within <p> tags in my #currentpage_content div id.
Any links with <h3> tags with a .profile class.
It sounds pretty simple but i can't see to get it right..
I've tried things like:
#currentpage_content a:hover{...}
and
#currentpage_content p a:hover{...}
but for some reason that applied to my navigation bar links even though they're outside #currentpage_content's div!
I also eventually figured out you could do something like this ( i think)..
#currentpage_content a.p:hover{...}
but now the link style aren't being applied at all when they should be.
Could someone please look at the bullet points above and tell me the exact syntax/order of words i need to achieve those two bullet points?
To make response easier here's the style i'm trying to apply:
a:link, a:visited, a:hover, a:active
{
font: inherit;
color: Grey;
text-decoration: none;
border-bottom: 2px solid #d4ffaa;
}
a:hover, a:active
{background-color: #d4ffaa;}
#currentpage_content p a:hover, #currentpage_content h3 a:hover {
//put your CSS in here
}
Here is a fiddle with solution for your trouble.
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.