(SOLVED)Changing the color of the font in nav bar... HELP

1

I am doing my own portfolio page.
Now I am stuck cos I do not know how to change the color of those 3 words.

http://codepen.io/zhouxiang19910319/pen/jVqbmg

Here is what it supposed to look like:

header.png854Ă—126 4.05 KB

2

You’re using the incorrect CSS property font-color doesn’t exist. it’s just color:

Also, if you want to override bootstrap you should assign a class. This works:

#nav a{
  display:inline-block;
  margin-left:40px;
  color: black; /* does not work */
  text-decoration: none;  /* does not work */
}
1 Like
3

Wow…it worked… may I ask why???
Also I do not know what the “a” is for???
Why do I have to input
#nav a{} please explain… or you can link me to a doc

4

Sure thing, what this decorator says is find the ID tag nav and apply this to all a tags inside.

The reason why is related to the order of precedence in CSS. The browser calculates which style to apply based on how specifically each style is declared. #nav a is a very specific declaration, where as bootstrap applied a style to all a tags making them blue. When you don’t use a class or ID name bootstrap was overriding your CSS declaration.

You should look into debugging withe the browser console. You can see style precedence in the debugger along with which styles were overridden.

1 Like