Assessment wanted for styling fonts, lists, links, navigation menu

Could someone kindly check my work on CSS comprehension test for styling fonts, links, lists, and navigation menu?

I have 5 questions (same questions are also written in my CSS sheet).
Sorry in advance! :sob:

  1. I tried to make “permianslabserif” bold,
    but this doesn’t seem to be working…
    I declared font-weight: bold; as @face-type rule too.
    What is wrong with my approach?

  2. I originally tried to change the bullets into triangles by this ruleset.
    ul li { list-style-type: “:arrow_forward:︎”; }
    By using list-style-type: property,

  • Can I change the bullets’ colour?
  • Can I adjust the space between the bullet and the list item?
  1. Why are these triangles look slanted? How can I fix it?

  2. Even for navigation menu, is it important to make it visible which link you visited and which you haven’t?
    If I just think about the appearance, I think white text colour is always better on the brown background. (looks better than light green even as I styled “visited” state.)

  3. Should I always style :focus and :hover differently?
    In this case, for this navigation manu, I didn’t really understand the point of styling :focus with different colours from :hover…

My work:

Assessment page:

Hi @Risa

Excellent job on this big exercise!

I think what happens here is that the font you use has only one weight in it and by defining font-weight: bold; in the @font-face you tell the browser that this is a bold style. So nothing happens in font-family when using font-weight: bold; because the browser thinks it’s already bold.
The solution is to remove font-weight: bold from @font-face. This way it will be used as normal weight and you can then use font-weight: bold for your headings. The browser will make it bolder by itself.

When using list-style-type the bullets will have the same color as the text. The space can be adjusted with padding-left on the <li>. The triangles don’t look slanted to me.

I wouldn’t style visited and non-visited links in navs. In the normal text it probably makes sense, but there may be situations where it’s fine to not make a distinctions between the two.

I would say generally it’s fine to style them the same for navs. Remember that this exercise checks if you understood the different link states and it may be a bit over the top compared to a real life project.

I hope I was able to answer your questions. :sunglasses:

Stay safe,
Michael

1 Like

Thank you so much @mikoMK! :blush:

I could make headers bold by following your advice.
I’m also glad to know I don’t necessarily have to style visited/un-visited or hover/focus differently on navigation menu! :slightly_smiling_face:

Regarding the triangle bullets, I realised they look fine on FireFox and Safari, but slanted on Chrome.
I also realised they don’t look slanted on Chrome if I change the font-family to sans-serif, so I’m assuming the problem was caused by the combination of the letter, font, and browser. :sweat_smile:

If it’s okay I have just one more question…

When using list-style-type, how can I change the size of the bullets?
So far, solutions I could find were:

  • Turn off the bullets ul {list-style-type: none;}
    and use pseudo elements to generate bullets before list items
    li::before { content: "▶︎"; font-size: 10px;}

  • Set the size of bullets by using li { }
    and change the size of list items (text) by using <span>

Is there any better way to change the size of bullets when using list-style-type, or are these above solutions just fine?

Thank you so much in advance! :blush:

I’m glad I could help :slightly_smiling_face:

I think your first version with the pseudo element is the best. This way we don’t have to style and then restyle the list item. If you aren’t afraid of the browser support then of course :marker would be the modern way to do it.

Interesting! That reminds me, that I have forgotten to mention that you should always use a fallback font in your font-family (at least serif/ sans-serif after your web font).

1 Like

Hi @mikoMK,

I read about the fallback font, but I somehow completely forgot to do that! :scream:

Thank you so much for your help! :blush:

1 Like