Assessment wanted for CSS test styling box

MDN Learn
1

Hi :wave:
I would appreciate if someone could check my work on CSS assessment of styling a box.

I have two questions :slight_smile:
(The same questions are also written in comments in my CSS sheet.)

  1. I calculated and specified a unit-less value of line-height, but is this the right way to vertically align the text in the box? Is there a better way to do this?

  2. How can I know the contrast between background colour and text colour are high enough for everyone to read? Is there any tool I can use?

my work:

assessment page:

2

Congratulations, @Risa!

Great work on this exercise.

It’s fine to use line-height in this situation. Just be aware that it only works for single line text. Try adding some more words and see what happens.
I would also remove the height property. Then the height of the box solely depends on the line height. (No calculations needed to make it “fit in”)
Another possibility would be to use the same padding for top and bottom (again without the height property).

When you open the Firefox DevTools and select Accessibility. You can activate the element selector and hover of the text to se the contrast.

2022-08-24_11-54
2022-08-24_11-54850×282 22.6 KB

Stay safe,
Michael

1 Like
3

Thank you so much Michael! :blush:

I tried multiple-line texts with all three approaches:

  • using line-height, with fixed .box height
  • using line-height, without fixed . box height
  • using equal padding on top and bottom

Now I clearly understand which one is easier and more effective to vertically centring text, especially for multiple lines! :smile:

I also realised the contrast is lower than ideal (by using DevTools), so I improved it too.

Thank you so much for always being very helpful!

1 Like
4

That’s a nice case study you did with the different versions :heart_eyes:

I’m glad I could help you understand it better.
Keep up the great work!

1 Like