Im using bootstrap 4 if that matters, but I am trying to change the color of the texts within the anchor tags. I am using an external CSS file and can't seem to get it to work. This is probably a dumb question, but hey i'm new to front-end! Teach me wizards!
#home_nav {
background-color: #5680E9;
}
.home_text{
color:#ffffff;
}
<div class="container-fluid" id="home_nav">
<div class="row">
<div class="col-4">
<div class="display-2 home_text">Create</div>
<div class="display-2 home_text">Explore</div>
<div class="display-2 home_text">Your Library</div>
</div>
<div class="col-8">
</div>
</div>
</div>
Welcome to StackOverflow and also welcome to coding frontend!
I'll try to give some explanation.
.home_text {
color: #ffffff;
}
tells the browser to apply a white text color to elements that have the CSS class home-text.
color is also a so-called inherited property which means that child elements will also have color: #ffffff; (short: color: #fff;) unless more specific rules state otherwise.
In your case, the browser has default styles for many elements, including <a>. This is called user agent stylsheet and its rules apply unless overwritten by your css.
To overwrite a rule, your rule needs to be at least as specific as the user agent stylesheet rule.
The user agent stylesheet for anchors in e.g. Chrome looks like this:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
This is using webkit (the engine behind chrome used to be called "webkit", thus the naming) specific syntax which you shouldn't let throw you off. The important part is that it holds a rule for color which you want to replace with your color #fff.
On top of that, browsers also have a different default color for links which have already been visited. You either need to define this for your links too (e.g. #eee for pages already visited) or simply add a second selector (separated from the first by a comma) telling the browser not only to apply your color to a elements, but also a elements in visited state. This is done by adding :visited to a.
To sum it up, if you want all links on your page to be white, you'd go with this:
a, a:visited {
color: #fff;
}
If you want only a inside of elements that have class="home_text" to be white:
.home_text a, .home_text a:visited {
color: #fff;
}
If you have any further questions, or if something is unclear, just ask in the comments!
Happy trip into frontend!
you have to add the style to 'a' specifically
.home_text a{
color:#ffffff;
}
You can try this:
.home_text a {
color: blue;
}
If you don't want the underline then try this:
.home_text a {
color: blue;
text-decoration: none;
}
Use complete selector for css .. Ex. .home_text >a
If still not working ..color must beihg set somewhere else. So check other css or write ! important for color.
Little advice
Use the full path to an ID
#home_nav .home_text a
or
home .home_text a
Sometimes you save your nerves when the element does not want to change.
Related
I have an 'a' tag that is a normal link to another webpage.
I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.
This is what I have tried so far:
(HTML)
example
(CSS)
a {
color: #000;
text-decoration: none;
}
a:hover {
color: unset;
text-decoration: underline;
}
JS fiddle example of that code here
The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?
The value for original setting you're looking for is called initial.
a:hover {
color: initial
}
However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.
a:not(:hover){
color: #000;
text-decoration: none;
}
Hi, I'm Link.
The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.
Or if that doesn't work in your environment, you could style the link with the default colors:
a { color: #000; text-decoration: none; }
a:hover {color: #0000EE; text-decoration: underline; }
Hi, I'm Link.
That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.
The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.
I have an HTML page where the links are specified blue by default for most of the body. I speficy it like this (using SASS):
a:link {
color: $link_new; // This is a blue colour
}
I have a navigation menu that has a blue background, so just in the header, I want to change the links to white. Up until recently, my header was contained in a DIV tag that had the ID "header". My code is like this:
#header a:link {
color: #ffffff;
text-decoration: none;
}
Recently, I thought I would change the div to be a <header> tag. Just change <div id="header"></div> to <header></header>. So, in my CSS, I have:
header a:link {
color: #ffffff;
text-decoration: none;
}
But, when I do this, the link text stops being white! I change nothing else, so I don't see how this can be. I reverted the <header> back to <div id="header">, and my links go back to being white, as they should be.
I don't get it. Does a <header> tag inherit differently or something? Why would the header tag pull the colour from the a:link declaration, and not the more local header a:link declaration?
Here is what the link element looks like under the ` when using the Firefox developer inspector:
And here is what it looks like with a <header> element:
As you are not using HTML5 (by seeing your Doctype) so you cannot used header element directly . As per HTML5 specification header is treated as HTML element. So simply change your Doctype and use this one <!DOCTYPE html> then you can use <header> element.
You need to add :link after a
Like this
header a:link {
color: #fff
}
You need to change a:link to a.
header a {
color: #ffffff;
text-decoration: none;
}
Please check the Jsfiddle demo
in first code you written code by using selector '#header a' and after you use <header> tag than you give style by using 'header a'
in this case ID's priority is high than class or element selector
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
http://css-tricks.com/specifics-on-css-specificity/
I'm trying to create my website so you can tell where you are just by the colour of the elements in each div. The website is only one page and I'm using jQuery to slide out sections of the website when you click to open that section (As opposed to having seperate .html's).
To show them which section they have open I'm making all links in each section the same colour as the text that opens that section. However I also want to have<a> </a> tags which aren't links to add a bit of colour to the site and to attract viewers to key bits of information. For this reason I want to only apply link effects to <a> </a> tags which are actually links... So I've tried this:
#box1 a{
color: #68cff2;
}
#box1 a:link:hover{
color: #ffffff;
background-color: #68cff2;
}
This works for the background-color as in it only changes the background colour for <a> </a>'s that have a href="..." but it doesn't change the color of the font for such links... is there any way to sort this?
The :link pseudo-class only applies to unvisited links, as opposed to all links. Remember that you have visited links to account for as well. You may need to repeat the selector for visited links, as I notice that you haven't done so:
#box1 a:link:hover, #box1 a:visited:hover {
color: #ffffff;
background-color: #68cff2;
}
(or just use #box1 a[href]:hover instead, more info)
I should add, though, that you shouldn't be using <a> tags to mark up things that aren't links and don't serve as anchors either, just to "add a bit of colour to the site and to attract viewers to key bits of information". That's not what they're designed for. A more semantic alternative would be something like <em> or <strong>, though of course you have to remove the italic or bold style if you don't want it:
#box1 a, #box1 em {
font-style: normal;
color: #68cff2;
}
#box1 a:hover{
color: #ffffff;
background-color: #68cff2;
}
Then you won't need to specify the :link and :visited pseudo-classes, since you can basically guarantee that all your remaining <a> elements are links.
Is there a need for a:link:hover{}? Just try using a:hover {}
a:hover will also affect the anchor tags, which can be confusing to end-users if they behave in the same way as links.
I have to disable the color change of an anchor tag when visited. I did this:
a:visited{ color: gray }
(The link is gray in color before visited.) But this is a way where I explicitly state the color after the link is visited, which is again a color change.
How can I disable the color change of an anchor tag when visited without doing any explicit color changes?
If you just want the anchor color to stay the same as the anchor's parent element you can leverage inherit:
a, a:visited, a:hover, a:active {
color: inherit;
}
Notice there is no need to repeat the rule for each selector; just use a comma separated list of selectors (order matters for anchor pseudo elements). Also, you can apply the pseudo selectors to a class if you want to selectively disable the special anchor colors:
.special-link, .special-link:visited, .special-link:hover, .special-link:active {
color: inherit;
}
Your question only asks about the visited state, but I assumed you meant all of the states. You can remove the other selectors if you want to allow color changes on all but visited.
You can't. You can only style the visited state.
For other people who find this, make sure that you have them in the right order:
a {color:#FF0000;} /* Unvisited link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Selected link */
For :hover to override :visited, and to make sure :visited is the same as the initial color, :hover must come after :visited.
So if you want to disable the color change, a:visited must come before a:hover. Like this:
a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }
To disable :visited change you would style it with non-pseudo class:
a, a:visited { color: gray; }
a:hover { color: red; }
It’s possible to use the LinkText system color value from the CSS 4 Color Module to obtain the browser default value if one wishes to defer to that.
a:visited { color: LinkText; }
link
However note:
These values may also be used in other contexts, but are not widely supported by browsers.
It at least appears to work in Firefox 98 and Chromium 99.
If you use some pre-processor like SASS, you can use #extend feature:
a:visited {
#extend a;
}
As a result you will see automatically-added a:visited selector for every style with a selector, so be carefully with it, because your style-table may be increase in size very much.
As a compromise you can add #extend only in those block wich you really need.
For those who are dynamically applying classes (i.e. active):
Simply add a "div" tag inside the "a" tag with an href attribute:
<a href='your-link'>
<div>
<span>your link name</span>
</div>
</a>
Either delete the selector or set it to the same color as your text appears normally.
You can solve this issue by calling a:link and a:visited selectors together. And follow it with a:hover selector.
a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}
I think if I set a color for a:visited it is not good: you must know the default color of tag a and every time synchronize it with a:visited.
I don't want know about the default color (it can be set in common.css of your application, or you can using outside styles).
I think it's nice solution:
HTML:
<body>
<a class="absolute">Test of URL</a>
<a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>
CSS:
.absolute{
position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
text-decoration: none;
color: transparent;
}
a {
color: orange !important;
}
!important has the effect that the property in question cannot be overridden unless another !important is used. It is generally considered bad practice to use !important unless absolutely necessary; however, I can't think of any other way of ‘disabling’ :visited using CSS only.
Use:
a:visited {
text-decoration: none;
}
But it will only affect links that haven't been clicked on yet.
I want to do a dynamic word cloud and I was wondering if there is a way of changing the link colour in my html section, normally you just define the links colours in css something like:
.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link { color: #0c3569; }
.tag_cloud:visited { color: #0c3569; }
.tag_cloud:hover { color: #ffffff; background: #0c3569; }
.tag_cloud:active { color: #ffffff; background: #0c3569; }
But I'm planning to do a word cloud were every word has a different colour, aka link/visited will colour will be defined dinamicaly, but is there a way of defining link/visited/hover/active inline in the html?
I Imagine it could be something like this
<a href="something" style="font:arial; ???"word</a>
Thanks.
It can't be done inline since :hover etc. are css pseudo selectors and won't work inline since that is not the intention of it.
But don't be afraid of using css classes - you will need some javascript anyway to make this work. Just define the classes you want to use like:
.cloud_item_1:link {color:red;}
.cloud_item_1:visited {color:yellow;}
.cloud_item_1:hover {text-decoration:underline;}
.cloud_item_1:active {color:black;}
.cloud_item_2:link {color:blue;}
.cloud_item_2:visited {color:orange;}
...
And than apply them to your html as you wish. No big deal here.
You would need to have some JavaScript to change the color on hover and check if the item is active.
Or you could define a class/id (dynamically) for each of the items and target them with CSS.