My font and text size class doesn't work even though I copy and pasted the code

Question

On my website, I have a class to change font and text size named class='q'. the class will not work even though I copy and pasted this from the home page as It is menu bar for all pages. All other classes work but not this one, Why?

th.q {
 font-family: avenir;
 font-size: 25px;
}

<BODY>
  <TABLE class='a' border='0' width='100%'>
 <TR height='20%'>
  <TH class='q'><a class="hover">About</a></TH>
  <TH class='q'><a>Products</a></TH>
  <TH class='q'><a>Pricing</a></TH>
  <TH class='q'><a>Contact</a></TH>
 </TR>
  </TABLE>

What's not working? The `font-size` is working perfectly, and for the font family you need to have a [`@font-face`](https://stackoverflow.com/questions/23754655/css-not-recognizing-avenir-next-as-my-font-family) of that font. — Alexandre Elshobokshy, Oct 01 '18 at 08:20
Welcome! Unfortunately the snippet seems to work fine, so it's probably something else causing this on your live website. Things that come to mind: 1. Old version of the CSS file is cached, 2. There is a more specific selector (for instance `tr th.q` would override `th.q`). In either case, you can use `inspect element` (right click the `th` in the browser) or otherwise check using the developer tools (F12) which CSS styles are applied, and which ones are overridden by others. — GolezTrol, Oct 01 '18 at 08:22
have you tried a hard refresh (ctrl + f5) to force the stylesheet to update - browsers can cache the stylesheet so a soft refresh will not reload it — Pete, Oct 01 '18 at 08:24
I have a menu bar with links, the class should make the links have the font Avenir and be much larger than default but the text just takes its default font and shape. — Loren Meehan, Oct 01 '18 at 08:25
Developer tools isnt showing all of the code. (sorry if I messed up, Im new and have never needed to use developer tools — Loren Meehan, Oct 01 '18 at 08:29
You probably have a rule in your stylesheet targeting those links directly, that has a higher _specificity_. You can try to use the selector `th.q a` first, but if that doesn’t work, you will need to figure out where the currently applied styles are coming from first, and dev tools are the easiest way to do that. — misorude, Oct 01 '18 at 08:30
these links and a small hover animation are the only things on the page, I just started coding it. — Loren Meehan, Oct 01 '18 at 08:33

score 1 · Accepted Answer · answered Oct 02 '18 at 00:47

(Referring to your answer:)

Unfortunately, giving multiple elements the same id invalidates your HTML. If the #font selector was enough to fix the problem, you should be able to give the <table> an id instead and select its <th> descendants:

#navigation th {
  font-size: 25px;
}

<TABLE id='navigation' class='a' border='0' width='100%'>
  <TR height='20%'>
    <TH><a class="hover">About</a></TH>
    <TH><a>Products</a></TH>
    <TH><a>Pricing</a></TH>
    <TH><a>Contact</a></TH>
  </TR>
</TABLE>

Also, the border, width, and height attributes should be in CSS, not HTML:

#navigation th {
  font-size: 25px;
}
#navigation {
  border: none;
  width: 100%;
}
#navigation tr {
  height: 20%;
}

<TABLE id='navigation' class='a'>
  <TR>
    <TH><a class="hover">About</a></TH>
    <TH><a>Products</a></TH>
    <TH><a>Pricing</a></TH>
    <TH><a>Contact</a></TH>
  </TR>
</TABLE>

Of course, you shouldn't be using tables for layout, anyway.

Thanks, I just started with HTML and CSS about a month ago and I was taught at the start with decrepit code. — Loren Meehan, Oct 08 '18 at 04:29
The problem somehow fixed itself on its own, this thread is now closed. — Loren Meehan, Oct 08 '18 at 09:03

score 0 · Answer 2 · answered Oct 01 '18 at 23:41

Since nothing else works I have used Ids to fix it.

HTML

<BODY>
<TABLE  class='a' border='0' width='100%'>
    <TR height='20%'>
        <TH id='font'><a class="hover">About</a></TH>
        <TH id='font'><a>Products</a></TH>
        <TH id='font'><a>Pricing</a></TH>
        <TH id='font'><a>Contact</a></TH>
    </TR>
</TABLE>

CSS

#font {
font-family: avenir;
 font-size: 25px;
}

My font and text size class doesn't work even though I copy and pasted the code

2 Answers2