"Fundamental CSS comprehension" assessment


(Eman Hosam) #1

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.


Learning web development: Marking guides and questions
"Mozilla splash page" assessment
"Mozilla splash page" assessment
"Mozilla splash page" assessment
Learning web development: Marking guides and questions
"Mozilla splash page" assessment
(Chris Mills) #2

No worries — let’s run through it, using the finished CSS as a reference:

As you’ll see, in this example the global font-size has been set to 10px in the second rule:

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

This means that 1em is 10px, for descendants of <html>, unless a different font-size has been set anywhere in the hierarchy, which in this case it isn’t until we get to the <h2> inside the <header> and the <p> inside the <footer> (see below).

The next significant rule we have is this:

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

Here we are setting the height of the <header> and <footer> to 3em, which as hinted above, will compute to 30px in real terms (3 x 10 = 30)

So the height of these blocks is 30px — this is what we need to center our text in.

The slightly (but not very) tricky bit comes in these rules:

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

Here we have set the font-size of the <h2> to 2em, which computes to 20px, and the font-size of the <p> to 1.5em, which computes to 15px.

We need to set the line-height to 30px so the text will sit in the center of the containing block’s height, in each case.

For the <h2>, we set line-height as 1.5 — 2 x 1.5 = 30.

For the <p>, we set line-height as 2 — 1.5 x 2 = 30.

We are using unitless line-height values, which calculate the line-height relative to the font-size set on the element, as it is often useful to set everything relative to the font-size. To simplify it further, you could just use an absolute line-height value of 30px for both.

Hope this helps, and best regards.


(Eman Hosam) #3

Got it. Thank you :slight_smile:


(Adeseyeair3s) #4

I got 50 as a height and I set them to half the box height. so 2.5 em O.o
tho it usually is my thing to solve problems in strange methods. My interpretation of things are very odd
-_-

https://jsfiddle.net/60b3hzye/


(Chris Mills) #5

You are pretty close here. I’d say close enough for now :wink:


(Adeseyeair3s) #6

Ohh! Any thing I should watch for?


(Chris Mills) #7

I’d say try to make sure you use use logical values that divide into easy integers wherever possible, to make such calculations easier to handle. You won’t always avoid it, but it is annoying having to use values like 1.41333333333333338em :wink:


(Krys) #8

Hi! Just finished the Fundamental CSS comprehension assessment. May I please have the marking guide so I can check my work? Feedback is also welcomed if anyone has the time. Thanks!

/* 
Specificity of selectors:
    .card article img = 12
    .card footer = 11
    .card header =11
    .card = 10
*/


/* General styles that apply to the entire document */
body {
  margin: 0;
}

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


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

/* Styles for the header/footer of the card */
.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 header, .card footer {
    height: 3em;
    padding: 1em;
}

/* Styles for the main content of the card */
.card article img {
  max-height: 100%;
  float: right;
}

.card h2, .card p {
    margin: 0;
}
.card h2 {
    font-size: 2em;
    line-height: 1.5em;
}

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

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

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

Learning web development: Marking guides and questions
(Chris Mills) #9

Hi there,

Well done for finishing the Fundamental CSS Comprehension! You can find the marking guide here:

And the final finished version is here:

https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/

Let me know if you have any more questions.


(Filip sky) #10

Hi Chrismills

Could you give me feedback on fundamental CSS test,please?

here is CSS code

/* 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 {
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;
}

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

/* info about card holder*/
.card article {
height: 12em;
background-color: rgba(0,0,0,0.2);
color: antiquewhite;
padding-left: 1em;
}

/* card holder name*/
.card h2 {
font-size: 2em;
line-height: 25px;
}

/* card holder footer info*/
.card footer p {
font-size: 1.5em;
line-height: 5px;
}

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

.card p {
padding-top: 10px ;

}

.card footer, header {
height: 5em;
padding: 1em;
box-sizing: border-box;
}


(Chris Mills) #11

That looks really good - congratulations! You’ll see that it is pretty close to our finished version (https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/).


(Jey And Key) #12

Doing the fundamental CSS comprehension, and I belief the assignment is broken, like nowhere does it mention to make paragraph white or has it in starting CSS. I’m also confused about instruction asking for 50px in em since font was changed and it’s unclear if you like the absolute 50px or 50px equivalent accounting for changed font which is as silly. Would it be possible to also publish the answer?


(Chris Mills) #13

Hi there!

To answer your first point, I am talking about the overall computed height as being 50px. I’ve updating the wording to hopefully make this a little clearer.

To answer your second point, we do say “set its color to be fairly light so it is easy to read.”

The answer is published at https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/


(Jey And Key) #14

The column part of the guide uses floats, when columns are supported since 2 years ago.


(Chris Mills) #15

I’m assuming you are talking about CSS multi-column layout? You are right that this is supported well now, but it is not that useful for true multi-column layouts - such uses are better served by Flexbox, or floats if older browser support is needed.

Multi-column layout is useful for displaying single bodies of text in multiple columns, like a newspaper layout for example, but it doesn’t work for multiple columns currently - it is very hard to control where the columns break.


(Matt) #16

I’m looking for feedback about my work on the Fundamental CSS Comprehension exercise. I’m not sure if my footer is aligned perfectly but I can’t figure out how to fix it. Also my background colors seem a bit off.

body, h2, p, article, img, section {
  margin: 0;
  padding: 0;
}

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

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

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

h2 {
	font-size: 2em;
}

/* Rulesets to be matched up with selectors */

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

/* Rulesets for header and footer */

.card header {
	height: 3em;
	margin: 0;
}

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

.card footer {
  background-image: linear-gradient(to bottom,rgba(255,0,0,0), rgba(255,0,0,0.4));
  border-radius: 0 0 1.5em 1.5em;
  height: 3em;
  padding: 1em;
  margin: 0;
}

.card footer p {
	margin: 0;
	font-size: 1.5em;
}

/* Rulesets for main card content */

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

(Chris Mills) #17

Hi Matt,

From a cursory look, your code looks like it is definitely nearly there. Also, don’t be too worried if the colors are slightly off, as long as you have the basic ideas right.

You can check your code against ours, see:


(Mauro Di Bert) #18

@chrismills thanks for all your help! I’ve just had something that still don’t understand: and wanted to ask you:

  • why if the height of the card header and card footer are absolute, is it useful to use relative unitless line-height values?
  • why is the total height of both 50 and not 60?
  • maybe too silly question but what differs from setup card container and main content?

Thanks a lot!


(Chris Mills) #19

So, unitless line-height values are useful because they size the line height relative to the font-size, so if you change the font-size the line-height will stay correct relative to what it was before. Also, it is a useful way of centering the text inside the line.

The total height is 50 because you’ve got a content height of 30, and then a top and bottom padding of 10 — 30 + 10 + 10 = 50. The easiest way to visualize this is to use the developer tools’ visual box model display:

As for the last point, I’m not 100% sure what you mean — are you asking why we have a <section class=“card”></section> wrapper present in the example?


(Mauro Di Bert) #20

@chrismills thanks for the answer! I’ve fully understood it right now! hehe. And about was I was talking with sections is that we had to put four comments on the CSS in order to divide the different rulesets to organize the code but I don’t find visible differences between card setup and main content. It’s something really fullish maybe but I like to understand!!! hehe.

Thanks, man!!!