Text changes color after adding hyperlink

HTML & CSS
1

my text changed color after adding hyperlink. i tried the text-decoration but that does not work.

<div class="left-topbar" style="color:white;"><strong> About &nbsp; &nbsp;News</strong> &nbsp; &nbsp; <strong>Contact &nbsp; &nbsp; </strong> <strong> </strong><a style="text-decoration:none" a="a" href="contact.html"><strong>DJ Boziah's Mixes/Extends </strong> &nbsp; &nbsp; </a><strong>DJ Friend's Mixes </strong> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong>Login &nbsp;&nbsp;&nbsp;Create/ Account </strong></div>
2

The link gets the default link color, overriding the parent’s color.

If you want the link to inherit the color from its parent, you could set it to color:inherit;

3

[off-topic]
You really shouldn’t be using non-breaking spaces for formatting. Use CSS padding and margin: that’s what they are there for.
[/off-topic]

4 Likes
4

The underlining of links is a marker that it is a link and will do what a link does when you happen to click on it. It is important for accessibility reasons that the user know that it is a link,

Another common way to make the user aware it is a link is to give the link a different color (like blue) on hover, or let it have the text-decoration back on hover.

1 Like
6

Hi there djboziah,

try it like this…

https://codepen.io/coothead/full/MWazdgx

Here is the HTML code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body> 

 <ul class="left-topbar">
  <li><a href="about.html">About News</a></li> 
  <li><a href="contact.html">Contact</a></li>  
  <li><a href="#">DJ Boziah's Mixes/Extends</a></li>
  <li><a href="#">DJ Friend's Mixes</a></li>  
  <li><a href="#">Login Create/ Account</a></li>
 </ul>

</body>
</html>

…and the screen.css code…

.left-topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0.5em;
    background-color: #000;
 }
 
.left-topbar li {
    list-style: none;
    margin: 0.5em 0;
 }
 
.left-topbar a {
    display: block;
    padding: 0.5em;
    font-weight: bold;
    color: #fff;
 }

coothead

2 Likes
7

Your code is not well structured, @djboziah. You seem to be using elements such as <strong> for their visual appearance, and not for their semantic meaning. (See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong.) Your use of &nbsp; for layout has already been commented upon, and inline styles should be avoided wherever possible.

coothead’s example shows you a good method, so try to follow what he has done and learn from it. I remember you mentioned elsewhere that you are a beginner. Take time to learn up-to-date methods now, rather than learning old and obsolete methods you will have to unlearn in future.

I think you have misunderstood how text-decoration is used, and what it does.

3 Likes
8

Thank you soo much for the awesome tips, i am following every advise.

2 Likes
9

@coothead It worked! Thank you soo much. I appreciate the help especially with being a beginner.

10

@TechnoBear thank you for all the good tips. I started learning 2 weeks ago from templates and with the help of all of you i an gradually getting it, i am still at basic level but i am on track everyday learning.Thank you

2 Likes
11

You might find it better to learn from structured tutorials, which will give you a better understanding of how elements should be used. For example:

https://www.htmldog.com/guides/

3 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.