How do I change the font size within table cells?

Question

How do I change the font size within table cells?

Answer

You do this with CSS, which adds style to the structure of HTML. If you haven’t learned CSS, don’t worry, you can with the Learn CSS course! If you’re taking a Path, CSS usually follows HTML.

To change the font size of the data contained within table cells you can use the th, td selector along with the font-size property within a .css file. For example, a CSS rule geared at changing the font size within all cells might look like this:

 th, td {
    font-size: 18px;
  }

If you are having trouble finding where to put this, check the tabs at the top of the coding window. You should see two different files: index.html and style.css. You should be familiar with index.html as this is where coding for previous html lessons has taken place. In style.css, you’ll see css code you may not be familiar with yet, thats okay for now just take a peek and add the font-size code.
If that all sounds confusing to you, don’t worry, it soon won’t and you can return to this question later to further understand it.

14 Likes

A post was split to a new topic: Setting font size for table data elements

7 posts were split to a new topic: Is this still Introduction to HTML?

I’m only doing these courses to refresh myself on the basics that I haven’t used in years. Heck I’m using Node.JS, React, TypeScript, Electron, and more to make cross-platform software with just Javascript, HTML, and CSS. So I’m not freaking out like most newbies. But, I came here because as a professional developer, I too noticed that it jumped straight into asking you to add font-size: 18px; inside of th, td {} and no one could possibly know that if they’ve only been doing the HTML course. I started off with the HTML introductory course and got here with no prior usage or introduction to CSS. The course should be updated to give a small explanation and a link to the css course to learn more.

70 Likes

You are not the first to notice this, but now that a seasoned learner has chimed in (thanks, btw) we may get some attention paid to this issue. Tagging in @alyssavigil to hand this over to the Dev Team for review. It’s been an issue for long enough to warrant some urgency.

Hint: (to team) Sometimes even the obvious is not a fall back to instruction. This is one fail that seems to have escaped many eyes. One for the annals.

29 Likes

Thanks for this discussion as I am a beginner at this. If there was a previous reference in another lesson to CSS then I completely missed it. The solution also doesn’t appear to change anything in the code for me. If not for this thread then I would still be lost.

Once clarified/corrected I would like to do those last couple of steps again.
Thanks for the attention to this!

7 Likes

Glad I’m not the only one confused. Also thought it was weird it was referring to the CSS we “already did”. I think someone was editing lessons and mixed some stuff up or something.

6 Likes

I’m sort of in the same boat as @adriangrimroach80592 in that I’m in the process of learning to use Angular and TypeScript at work and I still don’t have a firm grasp on the basic stuff yet. I’ve seen some stuff related to CSS before so I wasn’t as stymied as some other people in here but Codecademy definitely needs to address this.

1 Like

Add me to the chorus. I have not seen anything related to CSS inn this html course. Even more confusing, is when I clicked to see the solution, I see nothing in the code that shows where the font size was changed to 18px. So I’m moving on to next lesson.

8 Likes

If you notice, there are tabs at the top of the black coding section. One is labeled style.css, click on that tab. Need to change the instructions to read, “Click on the tab labeled style.css,…”

10 Likes

ohhhh. I haven’t noticed the tab until your comment. Now it makes sense. Thanks! I was lost in the dark with the task “change the font size since you learned about styling earlier”.:roll_eyes::roll_eyes::roll_eyes:

1 Like

Guys and girls,

I think i found the problem, sort of…

At the TOP of the page it says index.html AND style.css

Click on style.css – here you can easily find the 'th’and ‘td’ you have to change.
(see the hint provided by codecademy)(also, pixels is indicated as “px”)

Hope this helps!

11 Likes

Thanks for solving the confusion!

Thank you so much! This really helped. I guess part of this lesson learning to look for answers :sweat_smile:

As a complete beginner this definitely confused me with the sudden addition of CSS. It kind of came out of nowhere and would be a little less confusing if an assumption of having no knowledge of CSS was made.

3 Likes

A post was merged into an existing topic: Is this still Introduction to HTML?

Thank you! I would never have noticed the tab without your help! :slight_smile:

Many thanks.
I stuck here for a few minutes until I read your comment saying “add font-size: 18px;”

Then I realize that the font size was missing so I have to add it :smiling_face_with_three_hearts:

THANK YOU!!! :slight_smile:

I was reading all messages from the top, then I found your message.
It helped me a lot.

Ook uit Nederland toevallig :slight_smile:

Hi there!
Can anybody explain me why I can not pass on this exercise?

th, td {
font-family: ‘Lato’, sans-serif;
font-weight: 400;
padding: 18px;
text-align: left;
width: 33.3333%;
}

I have changed this from 16 to 18 however still wants to give me the Solution option.
I also tried to change other font size what I have found in the “style.css” still gives me the solution.

So when I press on it, it changes to 18 that code what I ve just pasted but I can not see any other differences.
Please explain me how does it should work.
The beginning of the course I was suggested to HTML and followed by CSS. However in the meantime I came across this, I almost understood it, but I need help.
Explain me please what have I done wrong?

1 Like