Fundamental CSS comprehension assessment!!

MDN Learn
#1

This is the assessment https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension

And this is my work https://codepen.io/dasserban1/pen/XWqgeag

Thank you! :smiley:

#2

Hi @das.serban

Nice work! :tada:

I recommend using unitless line-height values. See https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values for an explanation.

To vertically center the text in header and footer you can make sure that font-size * line-height = height. For example:

.card header, .card footer {
  height: 3em;
  padding: 1em;
}

.card header h2 {
  font-size: 2em;
  line-height: 1.5;
}

.card footer p {
  font-size: 1.5em;
  line-height: 2;
}

See how both multiplications equal to 3em? That’s the corresponding height of the parent. This also makes sure that the whole height of the card is 5em (header) + 12em (article) + 5em (footer) = 22em (card). Isn’t it nice how everything fits together? :slightly_smiling_face:

Have a nice weekend,
Michael

#3

Thank you for your recommendations! This was very helpful and it is always good knowledge to learn! :smiley: :smiley:

1 Like