Assessment Fundamental CSS comprehension

MDN Learn
#1

Hello everyone. I need an assist with CSS assessment.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
Please let me know if I did something wrong.
Thank you

/* Selectors to be matched up with rulesets

.card article img (0-1-1-1)
.card footer (0-1-0-1)
.card header (0-1-0-1)
.card (0-1-0-0) */

/* Rulesets to be matched up with selectors */

body {
margin: 0em;
}

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

.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 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 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;
font-size: 1.5em;
padding: 0.5em;
text-align: center;
height: 1.8em;
width: 22.5em;
}
.card header .card footer {
height: 3em;
padding: 1em;
font-size: 1.5em;
}
.card h2, p {
margin: 0;
}
.card article img {
max-height: 100%;
float: right;
}
.card article p {
font-size: 1.5em;
padding-left: 0.8em;
padding-top: 0.3em;
color: #ccc;
}

.card article {

height: 13.5em;
background-color:rgba(0,0,0,0.1);
}
.card h2 {
font-size: 2em;
text-align: left;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 0.5em;
}

#2

Hi @Mykyta_22 and welcome to the community :wave:

Well done!

Your code looks mostly fine. One thing that’s missing is a comma in this selector: .card header .card footer. This should be .card header, .card footer.

The specificity at the beginning are not quite right. Classes are at the third position and elements at the fourth. Therefore the correct numbers are:

  • 0-0-1-2
  • 0-0-1-1
  • 0-0-1-1
  • 0-0-1-0

By the way, if you plan on doing more tasks it would be helpful if you could share your code in an online editor like https://codepen.io/, https://glitch.com or https://jsfiddle.net/. It’s much easier for us if we can see the result and test things out if necessary. Also the forum removes and changes certain code automatically. Thank you :blush:

Have a nice day,
Michael

#3

Thank you very much!
I will use codepen/glitch next time.

1 Like