# "Fundamental CSS comprehension" assessment

**URL:** <https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682>\
**Category:** Learn\
**Created:** [July 18, 2017, 10:36pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682 "2017-07-18T22:36:30Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![maurodibert](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/maurodibert/32/23004_2.png) [@maurodibert](https://discourse.mozilla.org/u/maurodibert)\
**Post date:** [November 13, 2017, 11:26am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/21 "2017-11-13T11:26:24Z")

</div>

@chrisdavidmills could you help me with this? I’m sorry if this is not the proper way but it’s what i found being really newby! **Tks!** :

> [@Learning Web Development: how to collaborate without coding yet](https://discourse.mozilla.org/t/learning-web-development-how-to-collaborate-without-coding-yet/21514):
>
> Hi! I wanted to know, how can I do to report some things I’ve been thinking about to contribute with things as design without knowing how to do them on code. For instance: it could be really helpful in long articles (but in everypage really), to have a button to go top page or better a menu to go directly focus to the list on the left to find something faster. Here the example: [https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling\_text/Styling\_links](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links) How can I do to report this things? Than…

---

<div class="post-metadata">

**Author:** ![RickSanch3z](https://avatars.discourse-cdn.com/v4/letter/r/958977/32.png) [@RickSanch3z](https://discourse.mozilla.org/u/RickSanch3z)\
**Post date:** [February 18, 2018, 4:34pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/22 "2018-02-18T16:34:09Z")

</div>

Hello,  
I have a question concerning line-height and how it works.  
When I’ve reached the question about sizing the line-height I’ve tried to experiment to understand how it works. But without success.  
If we follow exercise we have a h2 element inside a header element who has set height property to 3em(30px) and padding to 1em(10px). So I’ve tried to experiment and see how my h2 element will align in the content area of header element. h2 set to have margin = padding = 0 and I’ve set the font-size of the text inside h2 element to be 3em(30px) to occupy whole content area. I thought this should align the text in the content area. But without success.  
The problem if I do not understand how line-height or text inside and element (who’s in his turn inside an element header) work further work with HTML and CSS will get more confusing.  
Can some one explain how line-height behave? I have impression that there is some hidden line-height by default. But even when I unset line-height the 30px text wont align in the header element.  
Thanks.

 ![firefox_line_height_wtf](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/6/d/6d75cedb5927509ccd6b4d46caebb4506a8f06a7.png)

---

<div class="post-metadata">

**Author:** ![2alin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/2alin/32/49543_2.png) [@2alin](https://discourse.mozilla.org/u/2alin)\
**Post date:** [March 1, 2018, 1:49am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/24 "2018-03-01T01:49:28Z")

</div>

@RickSanch3z Your `<h2>` element must have 20px (2em) as font size, that’s what the assessment asks so you need to stick with that. Now, what they are asking is to align the heading in the header in a vertical way using only `line-height`, which takes either unitless values or px, em, percentages, etc. For our purposes, we have a height of 3em in our header (container) and 2em in our heading (content), so if we want to fill the content in the container we need to increase the content’s height by 1.5 times (3em/2em) and that’s the value you need for `line-height`.

---

<div class="post-metadata">

**Author:** ![jeff.learningtech](https://avatars.discourse-cdn.com/v4/letter/j/e0b2c6/32.png) [@jeff.learningtech](https://discourse.mozilla.org/u/jeff.learningtech)\
**Post date:** [June 12, 2018, 6:16am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/25 "2018-06-12T06:16:02Z")

</div>

Hi,my css is here. Can give me some feedback?  
/\* General styles - put these straight into your stylesheet \*/

body {  
margin: 0;  
}

html {  
font-family: ‘Helvetica neue’, Arial, ‘sans serif’;  
font-size: 10px;  
background-color: #ccc;  
}

/\* Selectors to be matched up with rulesets _/  
/_  
.card article img  
.card footer  
.card header  
.card  
\*/

/\* Rulesets to be matched up with selectors \*/

.card article img{  
max-height: 100%;  
float: right;  
}

.card footer{  
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));  
border-radius: 0 0 1.5em 1.5em;  
}

.card header{  
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));  
border-radius: 1.5em 1.5em 0 0;  
}

.card{  
width: 35em;  
height: 22em;  
margin: 5em auto;  
background-color: red;  
border: 0.2em solid black;  
border-radius: 1.5em;  
}

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

h2,p {  
margin: 0;  
}

.card article{  
height: 12em;  
background-color: rgba(0,0,0,0.2);  
color: antiquewhite;  
padding-left: 1em;  
padding-top: 1em;  
}

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

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

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [June 13, 2018, 11:19pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/26 "2018-06-13T23:19:07Z")

</div>

Hi Jeff,

Your code looks like it is definitely nearly there; nice work.

You can check your code against ours, see:

- Marking guide: mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/marking-guide.md
- Source code: [https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/style.css](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/style.css) 14
- Live version: [https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/) 6

---

<div class="post-metadata">

**Author:** ![martinp](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@martinp](https://discourse.mozilla.org/u/martinp)\
**Post date:** [June 28, 2018, 2:23am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/27 "2018-06-28T02:23:07Z")

</div>

Dear Chris,

I was hoping you could take a quick look at my code and give some feedback. The px value inherited from the html gave me a pause, but an easy fix once I realized everything needs to be calculated with 10px as basis instead of the usual 16px.

For whatever reason however, I can’t get the sizing of the whole box quite right. There’s this shadow under it, which is, I’m assuming, where the whole box should extend to (there’s no shadow in the example in the assessment article), but doesn’t.

The result is the following:

 ![shadow](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/b/2/b2a2561740371cbd0a6ffefd357bf5029b751ddf.png)

Here’s the code:

/\* General styles \*/  
body {  
margin: 0;  
}

html {  
font-family: ‘Helvetica neue’, Arial, ‘sans serif’;  
font-size: 10px;  
background-color: #ccc;  
}

.card {  
width: 35em;  
height: 22em;  
margin: 5em auto;  
background-color: red;  
border: 0.2em solid black;  
border-radius: 1.5em;  
}

/\* #1 \*/  
.card header, .card footer {  
height: 3em;  
padding: 1em;  
/_box-sizing: border-box;_/  
}

/\* #2 \*/  
.card header h2, .card footer p {  
margin: 0;  
}

/\* #3 \*/  
.card article {  
height: 12em;  
background-color: rgba(0, 0, 0, 0.4);  
}

/\* #4 \*/  
.card header h2 {  
font-size: 2em;  
line-height: 1.5;  
}

/\* #5 \*/  
.card footer p {  
font-size: 1.5em;  
line-height: 2;  
}

/\* #6 \*/  
.card article p {  
padding: 1em;  
color: white;  
}

/\* Header style \*/  
.card header {  
background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));  
border-radius: 1.5em 1.5em 0 0;  
}

/\* Footer style \*/  
.card footer {  
background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));  
border-radius: 0 0 1.5em 1.5em;  
}

/\* Main business card content \*/  
.card article img {  
max-height: 100%;  
float: right;  
}

Thanks.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [July 5, 2018, 9:19am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/28 "2018-07-05T09:19:50Z")

</div>

Hi Martin,

Sorry for the slow reply! I’ve had a look at your code, and compared it to our finished version. The thing causing the problem is that you haven’t removed the default margins the browser automatically sets on headings and paragraphs from those in the header and footer, so that extra vertical height is putting the alignment of everything slightly wrong.

If you add this into your code:

```auto
.card h2, .card p {
  margin: 0;
}

```

You should see the whole thing line up nicely.

---

<div class="post-metadata">

**Author:** ![keshavgoyal2014](https://avatars.discourse-cdn.com/v4/letter/k/85e7bf/32.png) [@keshavgoyal2014](https://discourse.mozilla.org/u/keshavgoyal2014)\
**Post date:** [August 22, 2018, 8:59am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/29 "2018-08-22T08:59:55Z")

</div>

IT CLEARED MY DOUBT WHY THE EXTRA SPACE WAS COMING

---

<div class="post-metadata">

**Author:** ![saeid.marouski](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@saeid.marouski](https://discourse.mozilla.org/u/saeid.marouski)\
**Post date:** [August 23, 2018, 5:47am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/30 "2018-08-23T05:47:42Z")

</div>

Hi Chris,  
Here is my code and its result (just a quick look and mark it!). Thank you so much in advance 🙂

 ![Capture](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/7/2/72a987b1986d65104c98bb62d718ca6e742fc655.png)

```
  /*General Page Style*/
  html {
    font-family: 'Helvetica neue', Arial, 'sans serif';
    font-size: 10px;
    background-color: #ccc;
 }

 .card {
    width: 35em;
    height: 22em;
    margin: 5em auto;
    background-color: darkkhaki;
    border: 0.2em solid black;
    border-radius: 1.5em;
    padding: 1em;
 }

 .card h2, .card p {
margin: 0;
 }

 .card header, .card footer {
    box-sizing: border-box;
    height: 5em;
    padding: 1em;
 }
 /*Header styles*/
 .card header{
   background-image: linear-gradient(to bottom,rgba(0,0,0,0.5), rgba(0,0,0,0));
   border-radius: 0.5em;
 }

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

 /*Main styles*/
 .card article img {
   max-height: 100%;
   float: right;
 }
 .card article {
background-color: rgba(0,0,0,0.1);
height: 12em;
 }

.card article p {
padding: 1em;
line-height: 1.3em;
font-size: 1.1em
}
/*Footer styles*/
.card footer {
   background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
   border-radius: 0.5em;
}

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

```

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [August 23, 2018, 4:49pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/31 "2018-08-23T16:49:58Z")

</div>

Hi there @saeid.marouski — this looks like some really good work — well done!

You have certainly got the main parts of the exercise right, albeit with some different colors; that is fine! The one thing I’d do is remove the padding around the card div, i.e. get rid of the `padding: 1em;` declaration out of the `.card { }` rule. I thought that looked a bit strange.

If you want to check your answer in more detail, you can check your code against ours, see:

- Marking guide: [https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/marking-guide.md](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/marking-guide.md)
- Source code: [https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/style.css](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/style.css)
- Live version: [https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/)

---

<div class="post-metadata">

**Author:** ![saeid.marouski](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@saeid.marouski](https://discourse.mozilla.org/u/saeid.marouski)\
**Post date:** [August 27, 2018, 8:40am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/32 "2018-08-27T08:40:00Z")

</div>

Thank you for your response

---

<div class="post-metadata">

**Author:** ![martinp](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@martinp](https://discourse.mozilla.org/u/martinp)\
**Post date:** [October 12, 2018, 3:14pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/33 "2018-10-12T15:14:42Z")

</div>

Hi Chris,

Thanks for your reply. This is ancient stuff now as I didn’t log into here for a while, but any guess why this didn’t work with my original rule #2 (.card header h2, and .card footer p)? It’s basically the same thing with 1 more item added in the selector chain for specificity, right? Or am I missing something crucial?

Also, is the last thing in the assessment (getting the main paragraph to be padded) calculated to be exactly 1em, or is this just pretty much “eyeballed” to look right?

Kind Regards,  
Martin

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [October 15, 2018, 6:26am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/34 "2018-10-15T06:26:42Z")

</div>

Hi Martin,

Hrm, you’ve got a point here. I seemed to miss your high-specificity rule that was doing the same thing. I’m not sure now, and would have to go back and revisit it at some point.

As for the padding thing — this is calculated exactly, but the calculation is easy. The header and footer both have padding on 1em set on them, so giving the paragraph padding of 1em makes them line up nicely.

---

<div class="post-metadata">

**Author:** ![Tom-Vanderboom](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/tom-vanderboom/32/24458_2.png) [@Tom-Vanderboom](https://discourse.mozilla.org/u/Tom-Vanderboom)\
**Post date:** [October 19, 2018, 5:54am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/35 "2018-10-19T05:54:13Z")

</div>

Hi, Chrismills, could you give me any feedback on my fundamental CSS comprehension assessment? Here is CSS code

```auto
/* General page styles */

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

/* card container */
/*0010*/
.card {
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

/* header and footer */
/*0011*/
.card footer {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
}

/*0011*/
.card header {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
}

/* main business card contents */
/*0012*/
.card article img {
  max-height: 100%;
  float: right;
}

/* new rules */
.card header, .card footer {
    height: 3em;
    padding: 1em;
}

h2, p {
    margin: 0;
}

article {
    height: 12em;
    background-color: rgba(0,0,0,0.25);
}

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

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

article p {
    padding-top: 1.8em;
    padding-left: 1em;
    color: white;
}

```

And I also have some questions. I don’t know how to use column combinator even if I had read the “Combinators and group selector”. And I also don’t know the difference between [attr|=val] and [attr^=attr], it seems that they both select all elements with the attribute `attr` for which the value starts with `val`. Could you help me solve this two questions?

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [October 19, 2018, 10:59am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/36 "2018-10-19T10:59:33Z")

</div>

Hi @Tom-Vanderboom!

I have looked at your code, and it looks really good; pretty much spot on except that the padding of the contract details was a bit off. You used this rule to style it:

```auto
article p {
    padding-top: 1.8em;
    padding-left: 1em;
    color: white;
}

```

If you changed it to

```auto
article p {
    padding: 1em;
    color: white;
}

```

It would be centered better (or we could use flexbox for even more accuracy). But it is a pretty minor point — great work overall!

Now on to your questions:

1. The column combinator is an experimental new selector designed to allow you to select items inside a certain column in an HTML table. But this is currently very experimental and doesn’t seem to work anywhere yet except experimental browser builds. This is not helpful to learning about selectors, so I’ve removed it.

2. The stuff about attribute selectors is all in [https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction\_to\_CSS/Attribute\_selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors), but there are quite a lot of options and it takes a while to digest the differences between all of them. The difference between these two is quite subtle:

- `[attr^=val]` matches any element with an attribute `attr` that has the string `val` at the start of its value. This is a more general case.
- `[attr|=val]` matches any element with an attribute `attr` that has the string `val-` at the start of its value, OR, has the string `val` as its entire value. This was added to CSS specifically to handle language codes, e.g. you can use it to match `lang="en"` or `lang="en-US"`.

You’re probably unlikely to use the second one very often, if ever. To make it clearer that this is a specialist option and not very commonly-used, I’ve moved it out of the main list in the article, and put it as a note below.

---

<div class="post-metadata">

**Author:** ![Tom-Vanderboom](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/tom-vanderboom/32/24458_2.png) [@Tom-Vanderboom](https://discourse.mozilla.org/u/Tom-Vanderboom)\
**Post date:** [October 20, 2018, 4:12am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/37 "2018-10-20T04:12:30Z")

</div>

Thanks for answering! I have got it. Ummm, I also want to get some guidance in my [structuring planet data assessment](https://discourse.mozilla.org/t/structuring-planet-data-assessment/32546). Could you give me some advice?  
Besides, I love study in MDN, I think that the person who wrote the document is really excellent!😃

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [October 22, 2018, 11:12am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/38 "2018-10-22T11:12:50Z")

</div>

Answered 😉

I wrote most of the MDN learning area, so your comment makes me very happy. Thanks!

---

<div class="post-metadata">

**Author:** ![Henry-Z](https://avatars.discourse-cdn.com/v4/letter/h/f05b48/32.png) [@Henry-Z](https://discourse.mozilla.org/u/Henry-Z)\
**Post date:** [December 15, 2018, 8:20pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/39 "2018-12-15T20:20:06Z")

</div>

Hi Chris,

I have noticed a one issue in the comprehensions example.  
Part of the background is visible through the footer and header in the corner area.  
Any ideas how to fix it?  
Here is a picture. I changed color slightly so it is more visible.

[[Album] MDN CSS assessment border issue ![](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/a/9/a9e45bb82095b68bfdb0f87a13722145983527b7.jpeg "MDN CSS assessment border issue") ](https://imgur.com/a/Cse8Yl4)

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [December 17, 2018, 2:12pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/40 "2018-12-17T14:12:52Z")

</div>

Hi there @Henry-Z!

You are right — it took me a few seconds to see what you were talking about, but yes, it does show through a bit 😉

If you want to get rid of this, you could set the `border-radius` value set on `.card` to about `1.7em`.

---

<div class="post-metadata">

**Author:** ![selianordev](https://avatars.discourse-cdn.com/v4/letter/s/da6949/32.png) [@selianordev](https://discourse.mozilla.org/u/selianordev)\
**Post date:** [May 21, 2019, 12:14pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/41 "2019-05-21T12:14:51Z")

</div>

```auto
/* General styles - put these straight into your stylesheet */

body {

margin: 0;

}

html {

font-family: 'Helvetica neue', Arial, 'sans serif';

font-size: 10px;

background-color: #ccc;

}

/* card css */

.card{

width: 35em;

height: 22em;

margin: 5em auto;

background-color: red;

border: 0.2em solid black;

border-radius: 1.5em;

}

/* card header */

.card header{

background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));

border-radius: 1.5em 1.5em 0 0;

}

/* card footer */

.card footer{

background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));

border-radius: 0 0 1.5em 1.5em;

}

/* card article img */

.card article img{

max-height: 100%;

float: right;

}

/* new ruleset start here */

.card header,.card footer{

height: 3em;

padding: 1em;

}

/* remoove marging h2 p*/

.card h2 ,p{

margin: 0;

}

/* stop image from spilling out the main business card */

.card article{

height: 12em;

background-color: rgba(0,0,0,0.2);

}

.card header h2{

font-size: 2em;

line-height: 1.5;

}

.card footer p{

font-size: 1.5em;

font-weight: 500;

line-height: 2;

}

.card article p{

color: #fff;

padding-left:1em;

padding-top:2em;

}

```

[Previous page](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682.md?page=1)

[Next page](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682.md?page=3)