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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
You can look up the font you are using to see which font-weight values are available.
I understand the fact that some font families may have more font-weight values available than others, and that some may only have one (the default value). I’ve had a quick look to see if I can find some suitable reference material which lists available font weights by font family, but so far I can’t find anything.
Can anyone suggest something?
Or is it easier, and therefore more usual, to just find this out by trial and error?
(My understanding is that if a particular font-weight value isn’t available for a particular font family, then CSS will automatically render the ‘nearest’ one available according to a fallback weight rule.)
I’m not sure I fully get what you don’t understand, but hopefully this will help…
I think the fact that a value of "header" has been used for the <nav> element’s class attribute is purely a decision of the coder. It seems logical to me as the navigation bar is also a kind of header, and if the page had more than one navigation bar (and therefore more than one <nav> element) the class="header" would allows us to select this particular one individually. But, I also think this could equally have been class="navigation" or class="anything else". The point is that this <nav> element can be selected for styling with a CSS class selector of whatever word is chosen as the class's value, which in this case is .header.
There are four navigation buttons, but only the “Favourite Fonts” one is to be styled blue. That’s why the <a> element that renders the link for this button needs a different class value to the other three (which are all class="pagelink". I think the coder has chosen class="home", because this button takes you back to the top of the page (a kind of “home”), although I admit it would seem more logical if the button also said “Home”. But again, I don’t think it actually matters what word is chosen as the class's value. What’s important is that, whatever this value is, it’s used as the CSS class selector to style the element according to a specific CSS rule set - which it is, as follows:
I don’t know if this will help you Jon, but if you click in to each font on this webpage I’ll link, it lets you test out different weights. The few I tested I only saw a change between bold and normal, even though the picklist also has ‘lighter’ and ‘bolder’ for a total of four weights.
Thanks @agentgenx - but like you say, for each font on that linked web page, there only seems to be a difference between bold and normal. I find it hard to believe that there isn’t more variety available for some fonts…
It’s entirely due to the font-family creator. They can determine how many variants of ‘boldness’ to employ. Good font-families will usually employ a wide variety, though it is common to import only a couple for rendering purposes
Why are font weights listed using a 3-digit number if only multiples of 100 are valid, as mentioned in exercise 4? Why not just use 1-9 instead of 100-900?
Don’t quite get the css below. It means “home” class within “a” element?
a.home {
color: #4D00FF;
}
how is it different from
.home a {
color: #4DOOFE;
}
In semantic HTML lesson, we learned that HEADER element is better than DIV class= " header". So why are we using DIV instead of HEADER. Is it for only learning purpose?