<nav> styling does not override <a> styling

project

#1

Hi there,

I’m really new to CSS. I have written one styling for the a element which automatically updates the design of the navigation too. I then specified different parameters for the nav section but it does not override the design of a (only the font-size weirdly). Can you help?

I thought I might work around it by using an id=“menu”. Is it correct that you can’t add it in the tag as but rather have to add it to each link as , or is there another way?


#2

We will need to see your HTML to be able to answer this question.

Something to note,

a {}

nav a {}

The latter will override the generic selector as it is more specific. If a does not have a font-family, but nav does, then the anchor inside the nav element will inherit the font.


#3

Hi mtf,

Thanks for your answer!

This is my html:


#4

So where are we at? Is the page working now?


#6

It’s still not working. The navigation bar still takes on the styling of all the a elements :confused:

This is what I have in the css file:

nav {
 Font-family: Montserrat;
 Font-size: 20px;
 color: red;
 text-decoration: none;
}

a {
  color: lightpink;
  text-decoration: underline;
  text-transform: none;
}

#7

These may well be unrecognized property names.

font-family: ...

#8

Hi Roy,
I’m so sorry, I’m not exactly sure what you mean.


#9

Consider case sensitivity.