FAQ: CSS Typography - Font Weight

This community-built FAQ covers the “Font Weight” exercise from the lesson “CSS Typography”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Font Weight

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Why is there 2 lines of codes in html linking to css in the head section?

<head>
  <title>Typography Blog</title>
  <link rel="stylesheet" type="text/css" href="styles/reset.css">
  <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>

I believe this is what you are referring to. Notice the href values refer to two different style sheets: reset.css and style.css. In the exercise, you are working with style.css. Codecademy is linking reset.css to remove default styles from almost every html element. Many developers do this to avoid default behavior from interfering with expected behavior. If you click on the folder icon in the top left of the code editor, you can navigate to styles/reset.css and have a look at what it does. Hope this helps :grinning:

4 Likes

Yes, that was what I was referring to. Thanks.

Is it better practice to use the font-weight property in CSS or the tag in HTML to bold text on a web page or is this up to our discretion?

Just had to say that the fact that the author refers to the banner section as ‘blue’ hurts me.

How can I see or know if a text element has any default styling?

I believe from reading past posts for CSS that the common practice is to use HTML to add and organize the raw content and leave all the actual styling to the CSS. Bold typically falls under the banner of styling.

That said, I’m sure it wouldn’t hurt if you were to use the bold tags in HTML in some situations.

In the CSS for this section there are two different selectors used with a class name and an element:

a.home {

}

.banner p {

}

I know the first one is selecting all the anchor elements that have the class .home, but what is the second one selecting? All paragraphs that are a descendent of a parent that has class .banner?

All the default stylings of elements can be found at the W3C website.

Hope this helps.

https://www.w3schools.com/cssref/css_default_values.asp

From the all knowing Brains at the W3C…

Blockquote The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold

I am absolutely not an expert, That said, In my expert opinion: Bold can be used for style. You have a heading on a page “WELCOME TO MY WEBPAGE” and you want that to pop so you’d style it bold using CSS.

< strong > on the other hand isn’t for style it’s used, semantically (I think semantically), to imply importance “DO NOT USE A FORK TO CHANGE THE LIGHTBULB

The wonderful nerds over at mozilla have a good write up on the proper usage and difference.

2 Likes

I believe that is a Nested Selector

  • lighter: One font weight lighter than the element’s parent value.
  • bolder: One font weight bolder than the element’s parent value

What is “one font weight”? Is it 1/1000? If so, it doesn’t seem to me it’d make any noticeable difference, tbh

Hi, in this exercise…I noticed that only sans-serif font-family start in lower case and the rest of other font-family start in capital letters. May I know why?

Could someone let me know the meaning of the following:

  • lighter: One font weight lighter than the element’s parent value.
  • bolder: One font weight bolder than the element’s parent value.

@nad.chel @manishkhanna3002

The terms “one font weight lighter” and “one font weight bolder” refer to adjusting the font weight by one predefined step within the font family’s available weights.

Font weights are typically defined in a scale ranging from 100 to 900, with 100 being the lightest (thin) and 900 being the boldest (black). The exact increment between each step can vary depending on the font family and the font weights it offers. For example:

  • If the parent element’s font weight is 400 (normal), “one font weight lighter” would typically equate to 300 (light).
  • Similarly, if the parent element’s font weight is 400, “one font weight bolder” would typically equate to 700 (bold).

To summarize,

  • Generic font has no proper name, so is always lowercase.
  • Font family names are proper, just as one’s own name would appear: capitalized.

Designers didn’t come up with this. We’re taught it in grammar school.

After which( (grammar school) ‘Huckleberry Finn’ is a cake walk to read.

If you haven’t, then how ever old you are, it is a must, just like ‘Frankenstein’. Leave the ignorance behind with just one of these books. Read them both, and behold, a new kind of elevated ignorance, but something with hope attached, We get to peer through the darkness, and the light. Both give remarkable insight to our inherent intellect and the structure of our value system. Something to think about…