Regarding child element inheriting parent element's properties?

HTML-CSS
1

I have a question regarding child element inheriting parent element’s properties.

I tried doing several experiments with elements and what I found out is that if I set the font-family for parent element, it will affect the child elements inside it as well. However this doesn’t seem to be working on color as in if I want to choose specific color for child element, it won’t work if I set it for parent elment.

So let’s say that I have

nav{
float:right;
font-family:arial;
color:white;
}

nav a{
display:inline-block;
padding:2px;
background-color:black;
border:5px brown solid;
text-decoration:none;
border-radius:5px;

}

the color white will not be applied to child element “a” because I set it for parent element, but for font-family, it doesn’t seem to matter.

Is there a way to find out what other properties have these types of functions or do I just memorize whatever works?

=================
question #2:

if I put html{
color:white;
}

instead of nav a, only the title “Welcome!” gets only white, why?

2

Anchor elements have their own colour defined (blue for unvisited, purple for visited) by default. So just specifying a colour at the root level won’t change the colour of anchors unless you specify that you want to inherit that colour.

So adding

a {
  color: inherit;
}

Will fix this. There are defaults for a bunch of HTML elements though, so often you want to clear all of those, i.e. reset all styles:

If you’re using CodePen to prototype thing, if you go to Settings > CSS, there is a checkbox to turn the reset on, it basically just imports that stylesheet.

NOTE on the subject of browser defaults, you generally also always want, at the top of your CSS,

html {
 box-sizing: border-box;
}

*, *::before, *::after {
 box-sizing: inherit;
}