Are you ready?

1 questions to solve.

Instructions
  1. This quiz goes to full-screen once you press the Start button, or any Next button after exiting the quiz window.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
Inline elements are affected by custom dimensions i.e width and height properties. True or False?
Custom dimensions don't get applied to inline elements - hence the choice (B)/ Refer to CSS Dimensions Basics for more info.
In the following snippets what will be the final width of the div element?
<body>
    <section>
        <div>A div</div>
    </section>
</body>
section {
    width: 500px;
}
div {
    width: 100%;
    padding: 30px;
}
div is the child of section and hence will fill it up completely with the rule width: 100%. However due to the rule padding: 30px its width will exceed 500px (the width of section).
Consider the following code. You should assume that body isn't styled at all.
<body>
    <div>A div</div>
</body>
div {
    height: 100%;
    padding: 15px;
    background-color: grey;
}

Will the height rule in line 2 affect div's dimensions?

For a given element, height will act upon percentage values only if the element if positioned as fixed, or as absolute. For more info refer to CSS Positioning and CSS Dimensions Basics.
Give all .box elements a width of 100 pixels and a height of 200 pixels.
width and height like most of CSS properties require non-string values i.e ones without quotation marks. Moreover they require values with a <length> unit such as px, pc etc. Hence choice (A) is correct.
How can you get an element #div1 fill up its container's width up to the point it doesn't exceed 500px? If the width exceeds 500px then the element should remain in this very value.

Code 1

#div1 {
    width: 100%;
    max-width: 500px;
}
#div1 {
    width: 100%;
    min-width: 500px;
}
The width of #div1 shall not exceed 500px, which means that its max-width will be equal to 500px. Refer to Setting Limits on CSS Dimensions for more info.
Are both the following code snippets equivalent i.e do they both do the same thing?
Is the following CSS code sensible? If not then why?
What does box-sizing: border-box do when applied to a given element? Carefully read through.
How can you make the section element shown below fill up all of the viewport's width and height and scale relative to it.
Determine the width of the article element shown below.
Determine the dimensions of the div element shown below.
Consider the code below. How can you get the .cont elements to fill up half of their container's width.