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.
Related
I was trying pseudo code for an anchor tag in css, i.e. link, visited, hover and active. The html is:
<a href="https://www.w3schools.com/html/" target="_blank">
w3school
</a>
and the css is:
a:link {
color: blue;
text-decoration: overline underline;
}
a:visited {
color: green;
text-decoration: line-through;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: black;
text-decoration: overline;
}
After being visited, the text color is green which is correct. However, the text decoration is overline and underline, not line-through:visited is partially working. It seems that color is cascaded and text decoration not.
Could someone explain this?
Browsers these days limit what styles you can apply for the :visited state - because otherwise, checking for certain changes in layout via JavaScript allows to determine whether you visited an external URL already.
https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#Styling_restrictions:
Styling restrictions
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:
Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.
https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector:
Before about 2010, the CSS :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through window.getComputedStyle and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.
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.
Have a menu as an SSI. I wish to change color of displayed SSI links on page. My reading shows I can use CSS to change displayed link color, so created div around the menu and unique div id as well as CSS for the div. The div ID is “menu”.
CSS
#menu {
font-family: Verdana, Geneva, sans-serif;
margin-left: 25px;
a { color: #FFFF00; }
}
Only the unvisited links need to change, hence the single line. This code makes no changes to my links: they show default #0000EE. This code does provide the needed margin, so the server is reading the CSS.
I can change the link colors by adding html change to the body of the page, but I’d prefer not to:
<style>
a {color: yellow;}
</style>
This changes all links, not what I wish to do.
Unless you're using some kind of CSS preprocessor that supports nesting, then your CSS is invalid. Once the browser sees the a tag inside the #menu, it stops working because it expects a CSS property to be there and not another element selector.
To get the correct styling, do this:
#menu a {
color: #FFFF00;
}
If you want to style only links that have not been visited, do something like this:
#menu a:not:visited {
color: #FFFF00;
}
I know that this question has been asked here before, but none of the answers provided there seem to be working for me.
I have a stylesheet setting the color of all links to, let's just say, red. All the rest of the text on the page is plain 'ol black. I have a particular H1 element that is a link, but I do not want this H1 element to be red, like all other links. Instead, I just want it to be regular black, like all other text. No matter what I seem to try, though, it stays red as all other links.
This is the code I have in my stylesheet:
a:link {text-decoration: none; color: #B83131;}
a:visited {color: #B83131;}
I have tried specific styling for the specific H1 tag, but it doesn't help. I tried giving the H1 tag a class name and styling that class, but it didn't help. I feel like I am missing something here...
Did you set it to the anchor?
h1 a:link { color: black; }
If your markup resembles the below:
<h1>
Bleh
</h1>
Then you should be able to add the CSS rule as:
h1 a { color: #000; }
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.