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!
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?
I originally tried to change the bullets into triangles by this ruleset.
ul li { list-style-type: âď¸â; }
By using list-style-type: property,
Can I change the bulletsâ colour?
Can I adjust the space between the bullet and the list item?
Why are these triangles look slanted? How can I fix it?
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.)
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âŚ
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 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!
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.
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?
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).