I'm just starting out in CSS and am have some trouble with adding colour to links. When I add the link colour it doesn't work, so I tried to fix it myself but only messed up my website more.
This is my code.
<html>
<head>
<title> website </title>
</head>
<style type="text/css">
body
{
background-color:#474747;
color:#e1e1e1;
font-family:"Courier New";
text-align:center;
{
a:link
{
color:#00FFFF;} /* unvisited link */
a:visited
{
color:#4DFF4D;} /* visited link */
a:hover
{
color:#00FFFF;} /* mouse over link */
a:active
{
color:#00FFFF;} /* selected link */
}
h1
{
font-size:40;
}
h3
{
font-size:20;
text-decoration:underline;
}
p
{
font-size:12;
}
</style>
<body>
<h1> heading </h1>
<hr size="3" color="red" />
<h3>Welcome!!!</h3>
<p>Welcome to my website!</p>
<h3>Links</h3>
<p>Youtube</p>
</body>
</html>
Is it something in the Html code or in the Css coding?Please help.
Start by properly closing your braces and let us know how that goes
body
{
background-color:#474747;
color:#e1e1e1;
font-family:"Courier New";
text-align:center;
{
should be
body
{
background-color:#474747;
color:#e1e1e1;
font-family:"Courier New";
text-align:center;
}
There is an order to stylize anchors pseudo states.
a, a:link, a:visited {
/* any links, unvisited links, visited links*/
}
a:hover, a:visited:hover, a:active, a:focus {
/* any links hovered, any links already visited hovered, any links with active state (mouseDown or actual page), any links that has browser focus */
}
a:focus {
/* maybe you want to remove outline for this one */
}
Try this out , of course, after cleaning up your messy .css
Related
Why link before visiting already has purple color?Can you explain why does it happen?Below i am providing HTML code.
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color:purple;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
</style>
</head>
<body>
<p>Mouse over and click the link: XJEDI</p>
</body>
</html>
I have link to Jsfiddle
I'm using bootstrap for my website with a link that opens a new tab. In my desktop browser, the link remains focused(red) after I close the tab(without moving my mouse pointer in the window).
I added onclick="this.blur() to remove the focus(red), but hover is still in effect(green).
How to I remove both focus and hover?
CSS file:
a {
color:black;
}
a:hover {
color:green;
}
a:focus {
color:red;
}
HTML file:
google
simply override it in CSS using the same color as the link,
a, a:hover, a:focus{
color:black;
}
and if you want, you can override :visited and :active too
a, a:hover, a:visited, a:active, a:focus{
color:black;
}
Here is a snippet
a,
a:hover,
a:visited,
a:active,
a:focus {
color: black !important;
}
/*important used for demo only*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
google
Use this:
a:active, visited {
color:black;
}
active is the state a link has after you clicked it. You won't loose the hover effect in this case.
I have two pre-defined classes (class-normal and class-on-select). A few li elements are making use of class-normal.
How do I make them use class-on-select only on focus/hover?
You can use :hover, :focus on same class to achieve these effects:
HTML:
<ul>
<li>Random li</li>
</ul>
CSS:
ul li {
color:black;
background:#BFBFBF;
border:1px solid #000;
/*css for class-normal*/
}
ul li:hover {
color:#fff;
background:#000;
border:1px solid #000;
/*css for class-on-select*/
}
Demo: http://jsfiddle.net/GCu2D/600/
class-normal:hover , class-normal:focus{
//your styling here
}
will do the trick.
You can try something like this:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
<p><b>Google</b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
JSFiddle Demo
I'm working on a project that has these requirements:
When hovering over a section with anchors, the colors of all anchors in that section (non hover/active state) change.
The active/hover state color of these anchors should inherit the normal anchor active/hover color.
I was able to achieve the first requirement, but the active/hover states don't change at all when hovering over the specific link. It's obviously an issue with specificity, but I can't seem to figure out why.
Here is a boiled down version of the code: http://codepen.io/dbough/pen/maxrv
a:link, a:visited {
color:green;
}
a:hover, a:active, header .color a:hover, header .color a:active {
color:pink;
}
.color a:link, .color a:visited{
color:red;
}
$("header").hover(function() {
$("header").addClass("color");
},
function() {
$("header").removeClass("color");
}
)
In the simplest terms.
Define a color for all links
Set a hover color hased on the ul being hovered
Set a different colow when the a is hovered
a:link {
color:green;
}
ul:hover a {
color:pink;
}
ul a:hover {
color:red;
}
Codepen Example
Does that not meet the criteria(?)...and no JS required
This has nothing to do with specificity, your selector just doesn't match.
header .color a:active {
You are using JavaScript to add a class to the <header> element, but you are writing a selector where the element with the class is a descendant of the <header>.
Remove that descendant combinator from the selectors:
header.color a:active {
delete your style and jquery hover function and try use this (only css):
html,body {
margin:0;
padding:0;
}
header {
width:50%;
padding:auto;
margin:auto;
}
li {
display:inline;
padding:50px;
}
a, a:link, a:visited{
color:green;
}
a:hover, a:active{
color:pink !important;
}
header:hover a{color:red;}
Why the following styling of the link does not work ?
<html>
<head>
<style type="text/css">
a:link {color:#123456;} /* unvisited link */
</style>
</head>
<body>
Visit Google
</body>
</html>
Thanks !
For some general best practices, the link styling hierarchy works like this:
a:link {
color: #ff0000;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #cccccc;
}
a:focus {
color: #cccccc;
}
a:active {
color: #cccccc;
}
It's best to always apply all of these, whether you do them singly as above or like this:
a:link, a:visited {
color: #ff0000;
}
a:hover, a:focus, a:active {
color: #cccccc;
}
But regardless, the order is very important and things can be overwritten if it isn't followed.
It's because the link has been visited.
Try
a {color: blue;} /* unvisited link */
a:visited {color: orange;} /* visited link*/
If you remove the last declaration links will be blue regardless of :visited.
And you shouldn't rely on it working in the future:
http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/