Need help in the color attribute here

HTML-CSS
1

I am trying to develop my html/css skills but for some reason when I am trying to use color attribute for my .home:link and .about:link , it is not working. For others like the heading and .home:hover and .about:hover , etc , it is working perfectly fine. Here is the code :

/* Home link */
.home:link {
    text-decoration: none;
    color: #ffffff; /* Ensure the color is white */ /* issue is here: */
    font-size: 25px;
    font-family: 'Shadows Into Light';
}


.about:link {
    text-decoration: none;
    border-radius: 3px;
    font-size: 25px;
    color: #ffffff; /* Ensure the color is white */ /* issue is here: */
    font-family: 'Shadows Into Light';
}
2

Hi there and welcome to our community!

Do you have the corresponding HTML code to share with us please?

Also, when posting code on the forum, you’ll need to enclose it within backticks to ensure that it displays correctly.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
4 
.heading{
   width:100%;
   height:80px;
   margin-top:0;
   border-top:none;
   position:relative;
    background-color:#3c4c24;
	border-radius:10px;
   
}
.fixed-div{
		position:fixed;
		 width:100%;
   height:80px;
   z-index:1000;
   top:0;
   left:0;
   background-color: #3c4c24;
	}
body{
	background-color:#FFE5EC;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.dancing-script-font {
  font-family: "Dancing Script", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
/* Home link */
.home:link {
    text-decoration: none;
    color: #ffffff; /* Ensure the color is white */
    font-size: 25px;
    font-family: 'Shadows Into Light';
}

/* About link */
.about:link {
    text-decoration: none;
    border-radius: 3px;
    font-size: 25px;
    color: #ffffff; /* Ensure the color is white */
    font-family: 'Shadows Into Light';
}

	.home:hover{
		text-decoration:none;
		background-color:#ffea5e;
		color:green;
		border-radius:2px;
		font-size:30px;
	}
	.about:link{
		text-decoration:none;
		border-radius:3px;
		font-size:25px;
		color:#FFFFFF;
		font-family:'Shadows Into Light';
	}
	
	.about:hover{
		text-decoration:none;
		background-color:#ffea5e;
		color:green;
		border-radius:2px;
		font-size:30px;
	}
	
	.home{
		position:absolute;
		bottom:2px;
		left:10px;
	}
	.about{
		position:absolute;
		bottom:2px;
		right:20px;
		
	}
	.bebas-neue-regular {
  font-family: "Bebas Neue", serif;
  font-weight: 400;
  font-style: normal;
}

	.h1{
		font-family:'Dancing Script';
		color:white;
		font-size:30px;
		
	}
	.section2{
		background-image: url("dan-gold-4_jhDO54BYg-unsplash.jpg");
		width: 100vw; height: 200vh; background-size: cover;
		/* Ensures the image covers the container */ background-position: center;
		/* Centers the image */
		background-repeat: no-repeat;
		/* Prevents the image from repeating */
		
	}
	
.shadows-into-light-regular {
  font-family: "Shadows Into Light", serif;
  font-weight: 400;
  font-style: normal;
}
5

do you have some html that goes with your css?

6 
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link href="index.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">
<title>my blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<style>

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Shadows+Into+Light&display=swap');

</style>

</head>
<body>
    <section>
	<div class="fixed-div">
        <div class="heading">
<span><a class="home" href="index.html">home</a></span><span><a class="about" href="index.html">about</a> </span>
      <span class="h1"><center><h1>One Of A kind</h1></center></span></div>
	  
    </section>
	<section>
	<div class="section2">
	<div class="part1">
	<p>sup</p>
	</div></div>
	</section>
</body>
</html>
7

I’m not sure I understand your issue.
Here’s a screenshot of how it displays for me:

Untitled
Untitled1920Ă—628 8.45 KB

You want your links to be white? They are already, as far as I can see.

8

I got white as noted above but when I changed the href links to another web l ink I got purple text as the default. Is that your issue?

As an observation on your html, is there any reason why you have used classes rather than ID’s. Classes are usually to apply the same class name to several elements where the styling is the same. As far as I can see your class names are all different so an id name may be more appropriate. ID’s have a higher priority in CSS than classes as well.

9

thank you for helping me out . The issue was that the font was not coming white in my page . But after reading your comment and the comment below , I added an extra colour for when the link was visited and like the other comment said , it was because I had already visited the page that it remained purple for me .

10

Thank you . You made me realise where I went wrong . It was not with the code , it was just as you had said. I had already visited the page which was why it was not turning white for me . For the answer to classes, there was no reason in particular for it. But I will change it to ID from now on . Thank you for stating that

1 Like