How to change link color with css
Question
This is my HTML
.header_menu { list-style: none; list-style-type: none; margin: 0; padding: 0; overflow: hidden; max-width: 100%; position: fixed; } .header_menu__option { display: inline-block; font-size: 30px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; padding: 10px; color: black; color: inherit; } .header_menu__option a:link { text-decoration: none; }
<body> <header> <ol class="header_menu"> <img class="header_menu__img" src="material/header.png" alt=""> <li class="header_menu__option"><a href="">Home</a></li> <li class="header_menu__option"><a href="">Portfolio</a></li> <li class="header_menu__option"><a href="">Appoinments</a></li> <li class="header_menu__option"><a href="">More</a></li> </ol> </header> </body>
I have tried by adding to the .header_menu__option a:link the color and it doesn't work I also have tried by adding color to the other classes and doesn't work, but everything else like font-size, padding, etc do work.
5 answers
solution1
1 2020-10-07 04:53:38
You need to add color in a tag, by default a tag color is blue
.header_menu { list-style: none; list-style-type: none; margin: 0; padding: 0; overflow: hidden; max-width: 100%; position: fixed; } .header_menu__option { display: inline-block; font-size: 30px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; padding: 10px; color: black; color: inherit; } .header_menu__option a{ color: red } .header_menu__option a:hover { color: black; } .header_menu__option a:link { text-decoration: none; color: black; }
<body> <header> <ol class="header_menu"> <img class="header_menu__img" src="material/header.png" alt=""> <li class="header_menu__option"><a href="">Home</a></li> <li class="header_menu__option"><a href="">Portfolio</a></li> <li class="header_menu__option"><a href="">Appoinments</a></li> <li class="header_menu__option"><a href="">More</a></li> </ol> </header> </body>
solution2
0 2020-10-07 04:57:35
You can give this color in your class
.header_menu__option a:link {
text-decoration: none;
color:blue;
}
solution3
0 2020-10-07 05:00:50
Try this:
.header_menu__option a {
text-decoration: none;
color: green !important;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
}
.header_menu__option a:hover {
color: red !important;
}
solution4
0 2020-10-07 05:16:04
.header_menu__option :visited {
display: inline-block;
font-size: 30px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding: 10px;
color: black;
color: inherit;
}
I think you have visited or clicked on the links. try adding pseudo-classes. Dont overwrite your existing css add this as new styling for element.
solution5
0 ACCPTED 2020-10-07 06:14:25
Everything else is fine just Write class css as .header_menu__option a {} no need to write link
.header_menu { list-style: none; list-style-type: none; margin: 0; padding: 0; overflow: hidden; max-width: 100%; position: fixed; } .header_menu__option { display: inline-block; font-size: 30px; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; padding: 10px; color: black; color: inherit; } .header_menu__option a { text-decoration: none; color: red; }
<body> <header> <ol class="header_menu"> <img class="header_menu__img" src="material/header.png" alt=""> <li class="header_menu__option"><a href="">Home</a></li> <li class="header_menu__option"><a href="">Portfolio</a></li> <li class="header_menu__option"><a href="">Appoinments</a></li> <li class="header_menu__option"><a href="">More</a></li> </ol> </header> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can change link's color in CSS
CSS how to change the color of a link within a class
CSS Change link color on hover
How to change the color of an active link using CSS and Jquery
How to add a css transition color change for a link/div background
How To Change Color of Current Page Link - HTML / CSS / JavaScript
How to change the link color in specific area using css
How to change text color for link in tr element with CSS
How to change color of link and effect on hover using CSS and HTML?
Change link css color of specific class with JS
Related Tags