CSS

Question 1

What CSS properties make up the box model?

Answer 1

Margin, Padding, and border

Question 2

Which CSS property pushes boxes away from each other?

Answer 2

Margin

Question 3

Which CSS property add space between a box’s content and its border?

Answer 3

Padding

Question 4

What is a pseudo-class?

Answer 4

It is a keyword added to a selector that specifies a special state of the selected element(s)

Question 5

What are CSS pseudo-classes useful for?

Answer 5

Add functionality

Question 6

Name two types of units that can be used to adjust font-size in CSS

Answer 6

Px, Ems

Question 7

What CSS property controls the font used for the text inside an element?

Answer 7

font-family property

Question 8

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

Answer 8

Row

Question 9

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

Answer 9

Nowrap

Question 10

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

Answer 10

Because its a block element

Question 11

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

Answer 11

Row

Question 12

What are the three primary components of a page layout? (Which helper classes do you need?)

Answer 12

Container, row, and column

Question 13

What is the minimum number of columns that you should put in a row

Answer 13

1

Question 14

What is the purpose of a container?

Answer 14

To “contain” the entire layout and give the whole layout a minimum width. Make the layout organized.

Question 15

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

Answer 15

position: static;

Question 16

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

Answer 16

It would not affect

Question 17

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

Answer 17

THere is no inherit change

Question 18

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

Answer 18

Remove from the document flow.

Question 19

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

Answer 19

It depends on the non-statically positioned parent it will position itself against and any box offset properties

Question 20

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

Answer 20

Use the position: relative property in the containing block

Question 21

What are the four box offset properties?

Answer 21

Top, bottom, left, right

Question 22

The transition property is shorthand for which four CSS properties?

Answer 22

transition-delay: 250ms;
transition-duration: 2s;
transition-property: all, height, color;
transition-timing-function: linear;

Question 23

What is a breakpoint in responsive Web design?

Answer 23

The point in which the CSS updates for us. Ex: if the screen gets to 500px, the element changes its width

Question 24

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 24

It allows them to grow and contract with the web page as it moves between the break points.

Question 25

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 25

Because its the final one in the source order. So for the media query, its better to start from the smaller width to the bigger ones. (ex: min-width: 576px)