Assessment wanted for Fundamental CSS comprehension exercise

Hello,
I completed CSS building blocks section assessment: Challenge: Fundamental CSS comprehension - Learn web development | MDN

My code: https://codepen.io/user4292357/pen/zYqqbOr

I have some questions.

  1. Did I do this part correctly?

Also add three more comments at the bottom of the CSS file to indicate styles specific to the setup of the card container, styles specific to the header and footer, and styles specific to the main business card contents

  1. Why can’t I express line-height in ems? These two give different results:
h2 {
    font-size: 2em;
    line-height: 30px;
}

/* vs */

h2 {
    font-size: 2em;
    line-height: 3em;
}

Please review it :slight_smile:

Hey bb8,

Good work on giving Groot and ID card, which at his age is a bad idea, but I think it was very nicely laid out.

I personally wouldnt go to the vast extremes of setting line-heights of each element, unless you really need to squeeze text into something or you just want text to breathe.

your question about line-heights and font-sizes units where some work and others dont well this can best be explained in this article I found for you,
Web Typography | Line heights and Font sizes

I would say with the HTML markup of the ID card, if you are ever stating and address, it would be sematically better to use the <address> tag, it only adds accessibility to the page and makes it read better by screen-readers and others . Other BB8, Great Job :+1:

@drgaud1 thanks for the review and comments :slight_smile:

Agree about not using line-height, I’d use padding instead, but the task required to use line-height so I did :tipping_hand_woman:

Thanks for the article, now I get it. So if I wanted to express 30px line-height in ems, I’d have to use 2em instead of 3em because the font-size is 1.5em=15px.

I know about <address>, but again, the task said “don’t change anything in HTML” :slight_smile: