CODEWITHSUNDEEP
htmlcss
Loren Meehan
Loren Meehan

Reputation: 43

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

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>

Upvotes: 1

Views: 101

Answers (2)

AuxTaco
AuxTaco

Reputation: 5181

(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.

Upvotes: 1

Loren Meehan
Loren Meehan

Reputation: 43

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;
}

Upvotes: 0

Related Questions