CODEWITHSUNDEEP
htmlcsscolors
julietarios
julietarios

Reputation: 3

How to change link color with css

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.

Upvotes: 0

Views: 97

Answers (5)

Talha Maqsood
Talha Maqsood

Reputation: 307

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;
}

Upvotes: 0

Minal Chauhan
Minal Chauhan

Reputation: 6148

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>

Upvotes: 1

Prabhat Singh
Prabhat Singh

Reputation: 1555

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>

Upvotes: 0

SanktW
SanktW

Reputation: 5

.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.

Upvotes: 0

Abhi
Abhi

Reputation: 33

You can give this color in your class

.header_menu__option a:link {
    text-decoration: none;
    color:blue;
}

Upvotes: 0

Related Questions