# "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:** 3

<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:** [May 21, 2019, 12:37pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/42 "2019-05-21T12:37:57Z")

</div>

Hi @selianordev, thanks for submitting your code! This is looking mostly fine; there are just a few minor points that I wanted to talk about:

1. The alignment of the address is not just right, and the color is the not the same as the one we used. You used the following rule:

```auto
.card article p{
color: #fff;
padding-left:1em;
padding-top:2em;
} 

```

But it should more like this:

```auto
.card article p{
color: rgba(255,255,255,0.8);
padding:1em;
}

```

The color is not a major problem, but the alignment is slightly more serious.

1. The text in the footer is slightly different to what we had in our version. Again, this is not a big problem. Looking at your code, it is down to an unneeded `font-weight: 500;` declaration in the following rule:

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

```

1. You gave your article element a slightly different color to ours:

```auto
.card article{
height: 12em;
background-color: rgba(0,0,0,0.2);
}

```

We used `rgba(0,0,0,0.25)`. But again, this is only a very minor point.

Well done on a good bit of work.

---

<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, 1:10pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/43 "2019-05-21T13:10:35Z")

</div>

Hi @chrisdavidmills, thank you so much for your input … I am going to re-work on that … I real appreciate your comment  
thanks

 ![css_business_card_Mozila_Developer](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/0/5/050ff4222e455799ba7179be46666dcb60da6b58.png)

---

<div class="post-metadata">

**Author:** ![amaryllis](https://avatars.discourse-cdn.com/v4/letter/a/bb73d2/32.png) [@amaryllis](https://discourse.mozilla.org/u/amaryllis)\
**Post date:** [June 17, 2019, 3:25am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/44 "2019-06-17T03:25:30Z")

</div>

Hello!  
I also tried this.  
Published on GitHub Pages.  
[fundamental-css-comprehension](https://amaryllis-mt.github.io/MDN-fundamental-css-comprehension/)  
Please give me an evaluation.  
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:** [June 17, 2019, 12:14pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/45 "2019-06-17T12:14:22Z")

</div>

Hi there @amaryllis,

I have had a look at your work, and it looks perfect! It works exactly the same as our version, and there is nothing I can really comment on here. Well done on some great work!

---

<div class="post-metadata">

**Author:** ![Armiixteryx](https://avatars.discourse-cdn.com/v4/letter/a/22d042/32.png) [@Armiixteryx](https://discourse.mozilla.org/u/Armiixteryx)\
**Post date:** [July 16, 2019, 10:57am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/46 "2019-07-16T10:57:43Z")

</div>

Hello there!

I tried this assessment, [here is the page](https://armiixteryx.github.io/mdn_learning_area/css/introduction_to_css/assessments/fundamental_css_comprehension/). I would like to know if it needs something more.

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 17, 2019, 10:13am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/47 "2019-07-17T10:13:07Z")

</div>

Hi there @Armiixteryx,

I’ve had a look at your code, and it looks pretty much perfect — well done!

The only difference I noticed was that your address text is brighter, but this is definitely a good thing — the contrast was a bit dull on the original.

---

<div class="post-metadata">

**Author:** ![Armiixteryx](https://avatars.discourse-cdn.com/v4/letter/a/22d042/32.png) [@Armiixteryx](https://discourse.mozilla.org/u/Armiixteryx)\
**Post date:** [July 17, 2019, 1:45pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/48 "2019-07-17T13:45:52Z")

</div>

Thanks for your revision! 👍

---

<div class="post-metadata">

**Author:** ![El\_muchacho](https://avatars.discourse-cdn.com/v4/letter/e/e47774/32.png) [@El\_muchacho](https://discourse.mozilla.org/u/El_muchacho)\
**Post date:** [July 22, 2019, 2:07pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/49 "2019-07-22T14:07:50Z")

</div>

Hi, is there somewhere i can find what the html document should look like, please ? 🙂

---

<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 29, 2019, 12:58pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/50 "2019-07-29T12:58:55Z")

</div>

Hi there @El_muchacho, welcome to the community.

For this assessment, you can find the source code at [https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/)

---

<div class="post-metadata">

**Author:** ![nikolaesku](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/nikolaesku/32/28825_2.png) [@nikolaesku](https://discourse.mozilla.org/u/nikolaesku)\
**Post date:** [August 10, 2019, 7:20pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/51 "2019-08-10T19:20:49Z")

</div>

Hi, check my code, please

```auto
/*General page styles*/

body {
  margin: 0;
}

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

h2, p {
  margin: 0;
}

/* Card container styles */

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

/* Header and Footer styles */

.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 {
  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, .card footer {
  height: 3em;
  padding: 1em;
}

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

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

/* Main conents styles */

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

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

.card article p {
  color: lightcyan;
  padding: 1em;
}

/* 
Specificity:
.card article img - 12 
.card footer - 11
.card header - 11
.card - 10
*/

```

---

<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 22, 2019, 12:19pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/52 "2019-08-22T12:19:55Z")

</div>

Hi there @nikolaesku, and thanks for sending your code in!

This looks pretty much perfect, and you’ve got the specificity calculations right.

Your background and foreground colors are different to ours on the central area, but this is better for accessibility purposes.

The only minor thing to mention is that your footer text isn’t quite centered. You used the following:

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

```

Whereas we used this:

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

```

The parent `<footer>` element’s height is `3em`, so if we set the text `font-size` to `1.5em` then use a `line-height` of 2, we get an overall text height of `3em` — the unitless 2 value acts as a multiplier, so the font size of `1.5em` is multiplied by `2` to equal a computed `line-height` value of `3em`.

But apart from that, perfect. Well done!

---

<div class="post-metadata">

**Author:** ![mbrasseau](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mbrasseau/32/28904_2.png) [@mbrasseau](https://discourse.mozilla.org/u/mbrasseau)\
**Post date:** [September 19, 2019, 11:07pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/53 "2019-09-19T23:07:58Z")

</div>

Just a head’s up… this assessment is somewhat “hidden” in the flow of the tutorial list. Even on the page that this assessment sits on, if you look on the left navigation panel, it is not there. And the last tutorial, “Organizing Your CSS”, does not link or lead to it. I happened to find it, and bookmarked it, when I was looking up something else, completely unrelated. I checked the navigation panel to see when it would be coming up, and it wasn’t there. But I figured out where it was supposed to be, and have taken the assessment now.

Oddly, it shows up on the navigation panel on this page: [Advanced Styling Effects](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects)

But this particular tutorial is another that is not located on the Building Blocks list, nor does anything link up to it.

I just wanted to make sure someone was aware of the serious break in the tutorial flow. It is such a fantastic series.

---

<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:** [September 25, 2019, 6:48pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/54 "2019-09-25T18:48:16Z")

</div>

Thanks for bringing it up!

I have listed it in the main landing page for the [Building blocks module](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks), but forgot to add it to the sidebar.

I’ll sort that out now.

---

<div class="post-metadata">

**Author:** ![Pawper](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/pawper/32/32566_2.png) [@Pawper](https://discourse.mozilla.org/u/Pawper)\
**Post date:** [November 20, 2019, 8:42am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/55 "2019-11-20T08:42:24Z")

</div>

Hi @chrisdavidmills, it’s been a while, but I’ve been learning HTML & CSS every night of the last 34 nights 😃 I’ve finally made my way to the MDN CSS assessments.

Here’s the first one, if you can please mark it:  
Live: [https://fundamental-css-comprehension.hashbase.io/](https://fundamental-css-comprehension.hashbase.io/)  
Code: [Fundamental-CSS-Comprehension/style.css at master · Pawper/Fundamental-CSS-Comprehension · GitHub](https://github.com/Pawper/Fundamental-CSS-Comprehension/blob/master/style.css)

Thank you!

---

<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:** [November 20, 2019, 9:46am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/56 "2019-11-20T09:46:41Z")

</div>

Hi @Pawper, nice to hear from you, and glad you’ve been having fun with your learning 😉

This looks really good — your example does exactly what it is supposed to do, and as a bonus, you’ve changed the background color in the middle section to make the contrast better. Nice work!

---

<div class="post-metadata">

**Author:** ![srohit1101](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/srohit1101/32/32503_2.png) [@srohit1101](https://discourse.mozilla.org/u/srohit1101)\
**Post date:** [December 12, 2019, 4:26pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/57 "2019-12-12T16:26:02Z")

</div>

Hey guys I somehow managed to do this challenge but there’s very minute mistake or bug in aligning the borders of header and footer with the card…

 ![Screenshot 2019-12-12 at 21.50.01](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/3/f/3f2a001b971691859a11cc155c971816dcd7c0bd.jpeg)

Can someone help me with error ?

[https://codepen.io/rohit1101/pen/rNaLpjX?editors=1100](https://codepen.io/rohit1101/pen/rNaLpjX?editors=1100)

Check out my code in the above link…

---

<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 16, 2019, 10:16am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/58 "2019-12-16T10:16:07Z")

</div>

Hi there @srohit1101!

Your problem here stems from the fact that you’ve got the `card` class set on not only the `<section>` element, but also the `<header>` and `<footer>` elements too. So the styles applied to the overall card are being applied to those elements too, leading to some strange visual effects.

Removing the `card` class from `<header>` and `<footer>` should solve most of your problems.

After that, you can probably simplify your CSS too, as you won’t need the stuff that is trying to override the `card` styles.

---

<div class="post-metadata">

**Author:** ![R1C4RD0](https://avatars.discourse-cdn.com/v4/letter/r/f07891/32.png) [@R1C4RD0](https://discourse.mozilla.org/u/R1C4RD0)\
**Post date:** [August 31, 2022, 12:03pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/59 "2022-08-31T12:03:43Z")

</div>

you are so kind,thank you very much

---

<div class="post-metadata">

**Author:** ![Vlad1](https://avatars.discourse-cdn.com/v4/letter/v/ed655f/32.png) [@Vlad1](https://discourse.mozilla.org/u/Vlad1)\
**Post date:** [August 7, 2024, 6:20pm UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/60 "2024-08-07T18:20:48Z")

</div>

/\* General styles \*/

body {  
margin: 0;  
}

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

article img {  
width: 82px;  
float: left;  
margin-right: 5px;  
}

footer p {  
font-family: Verdana, Geneva, Tahoma, sans-serif;  
letter-spacing: 1px;  
background: linear-gradient(to right, #876180, #c08d66);  
border: 1px solid black;  
border-radius: 7px;  
padding: 3.5px;  
color: white;  
}

article p {  
letter-spacing: 1px;  
}

header h2 {  
color: rgb(255, 255, 255);  
font-size: medium;  
letter-spacing: 0.5px;  
font-family: Arial, Helvetica, sans-serif;  
margin: 0;  
font-weight: initial;  
background: linear-gradient(to right, #876180, #c08d66);  
text-align: center;  
border: 1px solid black;  
border-radius: 5px;  
}

/\* Container \*/  
.main-box {  
width: 300px;  
height: 150px;  
border: 1px solid black;  
border-radius: 5px;  
margin: auto;  
margin-top: 10px;  
padding: 10px;  
box-shadow: 5px 3px 5px rgb(89, 85, 85);  
background-color: rgb(221, 185, 167);  
}

 ![Screenshot 2024-08-07 212126](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/c/a/caa426ddcbea99e0bebf8edc333de2c44dce87ef.png)

---

<div class="post-metadata">

**Author:** ![Vlad1](https://avatars.discourse-cdn.com/v4/letter/v/ed655f/32.png) [@Vlad1](https://discourse.mozilla.org/u/Vlad1)\
**Post date:** [August 8, 2024, 9:00am UTC](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682/61 "2024-08-08T09:00:43Z")

</div>

> [@eman\_hosam](#):
>
> In the assessment: “Fundamental CSS comprehension”,  
> I didn’t know how to calculate the appropriate line-height to make the
> 
> centralized in header and footer

Go to the developer tools and find the line-height value, write different values ​​there and find what you need, and then add this value to your property in the code

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