Ways to adjust link hues using CSS

This is my unique 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 experimented with adding color to the .header_menu__option a:link and it has not been effective. Additionally, I have attempted to apply color to other classes without success, however, properties such as font-size and padding are functioning correctly.

htmlcsscolors

Answer №1

To change the color of the a tag from the default blue, you need to specify a new color in the CSS for the a tag.

.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="">Appointments</a></li>    
        <li class="header_menu__option"><a href="">More</a></li>
    </ol>
</header>   
</body>

Answer №2

Just ensure the CSS class is written as .header_menu__option a {}, no need to specify 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>

Answer №3

You have the option to apply this specific color to your CSS class

.menu_link__item a:visited {
    text-decoration: underline;
    color:purple;
}

Answer №4

.nav_link__active :hover {
display: inline-block;
font-size: 25px;
font-family: "Verdana", verdana, Geneva, sans-serif;
padding: 15px;
color: blue;
color: inherit;

}

It seems like you've interacted with the navigation links. Consider incorporating pseudo-classes to enhance user experience without overriding your existing styles. Add this new styling as a complementary element.

Answer №5

Give this a shot:

.navigation_link__item a {
    text-decoration: none;
    color: blue !important;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
}
.navigation_link__item a:hover {
    color: orange !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Importing usernames and passwords from a .txt file with Javascript

I'm in the process of creating a website that includes a login feature. The usernames and passwords are currently stored within the website files as .txt documents. I am aware that this method is not secure, but for the purpose of this project, I want ...

javascripthtmlcssauthenticationweb

Getting past the template element issue in Internet Explorer

Does anyone know of a solution to utilize the <template> element in Internet Explorer and Edge? An example of how I am currently using the <template> element: <template id="template-comment"> <tr> <td> ...

javascripthtmlinternet-explorermicrosoft-edge

The color of the left arrow on the tooltip cannot be altered

Currently, I am using a tooltip that is positioned on the right side: <i class="fas fa-question-circle text-blue" data-toggle="tooltip" data-placement="right" title="hello" ></i> I have attempted to modify the color of the too ...

htmlcsstwitter-bootstrap

What do you think about removing the Bootstrap styling from the design?

As a newcomer to Bootstrap and currently working on my second project using this framework, I find myself struggling with overriding CSS styles. It can be time-consuming to locate the specific style that needs to be changed rather than starting from scratc ...

csstwitter-bootstrap

What is the correct property for accessing and changing the value of a Text node: data or nodeValue?

What is the best option to use? The website suggests using nodeValue, although data shows better compatibility. ...

javascripthtml

The progress bar is visually enhanced with a border style that doubles as a background color

While experimenting with a jsfiddle to create an animated progress bar, I stumbled upon something peculiar. I had a single CSS rule applied to the progress tag: progress { border:2px solid #ccc; } Prior to adding this CSS rule, the progress bar looke ...

htmlcss

Dropdown of ui-select in AngularJS is positioned behind a div element, causing

The ui-select-match and choices component seems to be hidden behind the div/form structure. This particular ui-select component is enclosed within several parent elements, including some divs and forms. It eventually renders as follows: > <ui-select ...

htmlcssangularjs

Tips on creating a repeating background image with CSS for a sprite

I'm facing a challenge that I can't seem to solve - I need to set a sprite as the background for a container. The issue is that despite my efforts, I haven't been able to achieve this. I've searched extensively but couldn't find a ...

htmlcssbackground-imagecss-sprites

Tips for concealing text within navbar components for various screen sizes in Bootstrap 4

Is there a way to hide certain elements of a bootstrap navbar inline without creating new elements for each screen size? I attempted using a span, but it caused the line to wrap. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/ ...

javascripthtmlbootstrap-4

Issue with uploading files on remote server using PHP

Below is the code I am currently using: <form action="index.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file"><br><br> <input type="submit" value="submit" name="submit"> </form> ...

phphtmlfile-upload

Creating styles for different screen sizes including mobile devices, low-resolution desktops, and high-resolution desktops

One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays. In order to achie ...

htmlcssmobile

What could be causing this issue with my JavaScript code?

Here is the code I have: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <script type="module"> import * a ...

javascripthtmlvisual-studio-codethree.jsscript-tag

What is the method for creating a rectangle with text inside using HTML and CSS?

Hello, I need help with achieving this design using HTML and CSS. Can you assist me, please? https://i.stack.imgur.com/xOHVX.jpg This is what I have attempted so far: Below is my CSS code: .line-lg{ width:120%; text-align: center; border-bot ...

htmlcss

Enhance the functionality of WordPress by applying additional parameters to all URLs

I'm currently working on theme development in WordPress and I want to showcase different color scheme variants to a potential customer. I discovered a tutorial that explains how to extract parameters from URLs and use them in my code. This allows me t ...

phphtmlcsswordpress

Some of the Tailwind CSS colors may not be fully supported by Next.js for rendering

Don't forget to showcase all the amazing Tailwind CSS Colors, Sometimes they go missing unexpectedly, and only a few decide to make an appearance. I try to add them manually one by one, but sometimes they just don't show up on the map. Edit: ...

cssnext.jstailwind-css

Customize the arrow color in a TextField Select component from material-ui

Having some trouble changing the color of my arrow icon within the Material-ui TextField Select. Here's what I've tried: icon: { fill: "white !important", }, Despite applying these props, the color remains unchanged. I've experimen ...

cssselectoverridingmaterial-ui

Activate all chosen CSS circles

I'm currently working on creating a progress bar using CSS circles. The idea is that when you click on each circle in sequence (1, 2, 3), all three circles and the line connecting them will fill up with red color. If you then go back (3, 2, 1), the co ...

javascripthtmlcss

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...

javascriptjqueryhtml

Using PHP to manipulate MySQL databases with HTML tags

I am encountering an issue with strings retrieved from my database. These strings contain various HTML tags within them. For instance: "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys ...

phpmysqlhtmlstringtinymce

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

htmlcss