Chrome and firefox is not showing the true result of HTML/CSS

Chrome and firefox is not showing the true result of HTML/CSS
0

#1

i am using brackets to code my website and i have two browsers installed in my computer chrome and firefox but both of them are not showing the expected result but when i am uploading my code on fiddle it shows the expected result.

It isexpected to show text color pink color as default color when the website starts and then it should change to black when user visited the code but it’s getting black permanently on chrome and firefox but it’s working as i mentioned upward(expected) in fiddle.

Can anyone tell me where is the problem in my code

HTML CODE

<head>
    <link rel="stylesheet" href="CSSworking.css">
    
    <title>Html Working</title>
    
</head>

<body>
     
    
    <ul class="main">
    
    <li><a href="#">Home</a></li>
    <li><a href="#">Our Kitchen</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Go Down</a></li>
    
    </ul>

CSS Code

.main li{
    
    list-style: none;
    display: inline-block;
    margin: 20px;
}



a{
    

    text-decoration: none;
    font-family: fantasy;
    font-size: 50;
}

a:link{
    
    
color: pink;

}




a:hover {
    
    border-top: 4px solid red;
}

a:visited {
    
    color: black;
}

#2

When you use a:visited, it will apply what ever properties you define if the page the link points to has been visited. Since all of the links point to the same page (href="#" links to the current page), they all turn black. If each link had a different href, then only the ones that had been visited would turn black.

For example, try putting different values for each href:

    <ul class="main">
    
    <li><a href="#home">Home</a></li>
    <li><a href="#kitchen">Our Kitchen</a></li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#godown">Go Down</a></li>
    
    </ul>

As you click on each of these links, they will turn black, because even though they all link to the same page, they attempt to link to a specific section in the page. It does not matter those sections do not exist. It only matters that the browser sees them as different.


#3

sir i have tried this and it seems to be working but now when i click on all of the links it gets green as it is suppose to be but after that even after refreshing the browser it is not getting pink again it get stuck on green when once all of the links are clicked for once.


#4

To see them all go back to pink again, refreshing the browser may not work as the page has likely been cached. Clear your browser cache and look again.


#5

That is exactly how it should work. It sounds like you want something different to happen in general. Explain what you would like to see happen for various situations and then maybe we can help figure the best way to code it.


#6

what i want is for my link to be pink when it is not visited , and then turn green when i click on it (visited) that is it and i cleared my browser cache too but with the code mentioned above it is still getting green and not becoming pink.

Could you please write me a simple code of link and visited in which link should have one color and when visited it should change its color.


#7

Hey, would you mind posting the link of the fiddle you mentioned in the first post?