Why can't I call my css hyperlink style class from html code?

Question

I want to create multiple classes for hyperlink styles.

I want a default class as well as a special class for the navigation menu.

This is my CSS code:

a {
    color: white;
    text-decoration: none;
}

.menu-items a {
    color: black;
    text-decoration: none;
}

I tried calling the "menu-items" class in the html, but it continues to use the default a{} style shown above.

This is the html code:

<div class="container-outside">
    <div class="container-inside">
        <ul class="ul-list">
            <li>
                <a class="menu-items" href="temperature.html">Temperature</a></li>
            <li>|</li>
            <li>Weight</li>
            <li>|</li>
            <li>Currency</li>
        </ul>
    </div>
</div>

I tried removing the default class and creating two special classes without success. A bit overwhelmed here.

Answer 1

You can directly put the class name.menu-items

    

        

            

                Temperature
            
|
            
Weight
            
|
            
Currency
        
    
 

CSS


 a {
        color: white;
        text-decoration: none;
    }
    
    .menu-items  {
        color: black;
        text-decoration: none;
    }

Answer 2

Your selector is incorrect because menu-items is not the parent of as. You should select the tag like this:

a.menu-items {
color: black;
text-decoration: none;}