CSS day 2 & 3

Question 1

What is the default flex-direction of a flex container?

Answer 1

row

Question 2

What is the default flex-wrap of a flex container?

Answer 2

no-wrap

Question 3

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

Answer 3

because divs are block elements

Question 4

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

Answer 4

row

Question 5

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

Answer 5

The default position is static for any html element if not specified explicitly. static is always the initial value for the CSS property position no matter which tag.

Question 6

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

Answer 6

Relative positioning moves an element in relation to where it would have been in normal flow.

Question 7

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

Answer 7

This moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed.

Question 8

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

Answer 8

When the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page. (They act like it is not there.)

Question 9

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

Answer 9

This positions the element in relation to its containing

element.

Question 10

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

Answer 10

absolute, relative, and fixed. (anything other than static)

Question 11

What are the four box offset properties?

Answer 11

top, bottom, left, right

Question 12

What are the four components of “the Cascade”.

Answer 12

Source order, Inheritance, Specificity, Important

Question 13

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

Answer 13

The order that your CSS rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.

Question 14

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

Answer 14

due to CSS Inheritance. When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element.

Question 15

List the three selector types in order of increasing specificity.

Answer 15

Type selectors, Class, selectors, ID selectors.

Question 16

Why is using !important considered bad practice?

Answer 16

it makes debugging more difficult by breaking the natural cascading in your stylesheets

Question 17

What does the transform property do?

Answer 17

The transform property applies a 2D or 3D transformation to an element.

Question 18

Give four examples of CSS transform functions.

Answer 18

This property allows you to rotate, scale, move, skew, etc., elements.

Question 19

Give two examples of media features that you can query in an @media rule.

Answer 19

any-hover, color-index

Question 20

Which HTML meta tag is used in mobile-responsive web pages?

Answer 20

viewport meta tag

Question 21

The transition property is shorthand for which four CSS properties?

Answer 21

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

Question 22

What is a breakpoint in responsive Web design?

Answer 22

Breakpoints are the point a which your sites content will respond to provide the user with the best possible layout to consume the information.

Question 23

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

Answer 23

using % makes the site responsive. The main advantage of the use of percentage is the possibility of designing for all the resolutions with no need to make different versions for the Web.

Question 24

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?

Answer 24

due to source order.