"Fundamental CSS comprehension" assessment

eman_hosam · January 22, 2018, 9:55pm

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.

chrisdavidmills · January 22, 2018, 9:55pm

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

github.com

mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/style.css

/* General styles */

body {
  margin: 0;
}

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

/* card setup */

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

This file has been truncated. show original

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 · January 22, 2018, 9:55pm

Got it. Thank you

Air3s · January 22, 2018, 9:55pm

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/

chrisdavidmills · January 22, 2018, 9:55pm

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

Air3s · January 22, 2018, 9:55pm

Ohh! Any thing I should watch for?

chrisdavidmills · January 22, 2018, 9:55pm

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

kookiekrysp · January 22, 2018, 9:55pm

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;
}

chrisdavidmills · January 22, 2018, 9:56pm

Hi there,

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

github.com

mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension-finished/marking-guide.md

# Marking guide for "Fundamental CSS comprehension"
The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Fundamental CSS comprehension](https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clear cut.

The overall mark awarded is out of 35. Work out their final mark, and then divide by 35 and multiply by 100 to give a percentage mark. For reference, you can find a [finished business card](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension-finished/) that would be awarded top marks.

## Basic setup

<dl>
<dt>"create a new file in the same directory as your HTML and image files" (1 mark)</dt>
<dd>The first task — creating your CSS file — is only worth one mark. It is pretty easy, although you won't be able to do much without getting this right.</dd>
<dt>"Link your CSS to your HTML file via a <code>&lt;link&gt;</code> element" (2 marks)</dt>
<dd>Slightly more challenging, but again pretty easy.</dd>
<dt>"copy and paste them into the top of your new CSS file. Use them as a test to make sure your CSS is properly applied to your HTML." (1 mark)</dt>
<dd>This is just copy and paste, so not really worth much.</dd>
<dt>"Above the two rules, add a CSS comment with some text inside it to indicate that this is a set of general styles for the overall page. "General page styles" would do. Also add three more comments..." (2 marks)</dt>
<dd>Good commenting is important. You should award 0.5 marks for each of the four comments, as long as they are written in a sensible place with meaningful text.</dd>
</dl>

This file has been truncated. show original

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 · January 22, 2018, 9:57pm

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;
}

chrisdavidmills · January 22, 2018, 9:57pm

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/).

janat08 · January 22, 2018, 9:58pm

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?

chrisdavidmills · January 22, 2018, 9:58pm

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/

janat08 · January 22, 2018, 9:58pm

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

chrisdavidmills · January 22, 2018, 9:58pm

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.

nydybbuk · January 22, 2018, 9:59pm

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;
}

chrisdavidmills · January 22, 2018, 9:59pm

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:

Marking guide:
Source code: 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/

maurodibert · January 22, 2018, 11:28pm

@chrisdavidmills 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!

chrisdavidmills · January 22, 2018, 11:28pm

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?

maurodibert · January 22, 2018, 11:28pm

@chrisdavidmills 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!!!