3/17/2022

Question 1

Why do two div elements “vertically stack” on one another by default?

Answer 1

Because div elements are block elements by default and block elements start on a new line.

Question 2

What is the default flex-direction of an element with display: flex?

Answer 2

The default flex-direction of an element with display: flex is row.

Question 3

What are the four components of “the Cascade”.

Answer 3

1. Source order
2. Inheritance
3. Specificity
4. !important

Question 4

What does the term “source order” mean with respect to CSS?

Answer 4

Source order refers to the order that rules are written in the CSS stylesheet. Source order determines that the last rule written for an element is the style that will be applied to that element.

Question 5

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

Answer 5

Inheritance allows styles defined for a parent to be applied to its children as long as no style is already declared for a child.

Question 6

List the three selector types in order of increasing specificity.

Answer 6

1. type selectors
2. class selectors
3. id selectors

Question 7

Why is using !important considered bad practice?

Answer 7

It makes debugging difficult because it breaks the natural cascading in stylesheets due to !important overriding all other declarations.

Question 8

What is the default value for the position property of HTML elements?

Answer 8

Static

Question 9

How does setting position: relative on an element affect document flow?

Answer 9

It doesn’t affect document flow

Question 10

How does setting position: relative on an element affect where it appears on the page?

Answer 10

It does not affect where it appears on the page. You can offset it with the top, right, bottom and left properties.

Question 11

How does setting position: absolute on an element affect document flow?

Answer 11

position: absolute takes an element out of the normal flow and does not affect the position of the other elements on the page.

Question 12

How does setting position: absolute on an element affect where it appears on the page?

Answer 12

It is positioned relative its closest positioned ancestor, if any. If it doesn’t have one, it is positioned relative to its initial containing block. It is offset using the top, right, bottom or left properties.

Question 13

How do you constrain an absolutely positioned element to a containing block?

Answer 13

You set the position of the constraining block to position: relative.

Question 14

What are the four box offset properties?

Answer 14

Top, right, bottom, and left.