setting color for links using nav ul li a in a css

Question

Is there something special about links when setting certain properties?

It looks like some properties (font-weight, etc) will cascade down to the element from higher elements, but others don't. (I played around setting color at various levels in my code, then commented it out).

Color does not seem to work and text-decoration does not work fully.

Do certain properties need to be directly assigned to links? I am thinking this might be related to browser behavior (like visited)?

/*
   Example1 css
*/
body {
    color: red;  
    font-weight: bold;
    text-decoration: line-through;
} 
nav {
 /*  float: left; */
   margin-right: 10px;
   width: 200px;
}
nav {
    background-color: rgb(235,235,235); 
/*  color: black;  */
/*  font-weight: bold; */
} 
nav  ul {
/*     color: green;   */
} 
nav  ul li {
/*     color: yellow;  */
} 
nav  ul  li  a{
/*  color: orange;  */
} 


<!DOCTYPE html>
   <html>
   <head>
   <!-- 
        Example1
   -->
      <link rel="stylesheet" type="text/css" href="Example1_styles.css">
   </head>

   <body> BOO1
      <nav> BOO2
         <ul>BOO3
            <li><a href="#">Option 1</a> BOO4</li>
            <li><a href="#">Option 2</a></li>
         </ul>
      </nav>
   </body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 12:30

The default for a lot of elements on many css properties is 'inherit' which causes the parent's styling to apply. However, each type of element has it's own specific styling on some css properties (different properties for different elements), causing the parent's styling to not apply. I know this is kind of vague, but pretty much every kind of tag has something unique to it so there is not an easy, all-encompassing rule.

Let me give some examples: if you have <div><p>Some Text</p><div> any styling regarding text (font-size, color,etc.) that is placed on the div tag will apply to the p tag because it inherit's those properties by default. Anchor tags <a>anchor</a> however have a default for the attributes font-color and text-decoration and therefore these attributes applied to their parent div would be overwritten.

You can look at this stack overflow answer for lists of different element's default behaviors.

Hope that helps.

setting color for links using nav ul li a in a css

1 Answers1