CSS

Question 1

What are the names of the individual pieces of a CSS rule?

Answer 1

Selector
Declaration Block
Property
Value

Question 2

In CSS, how do you select elements by their class attribute?

Answer 2

.class{}
elements.class{}

Question 3

In CSS, how do you select elements by their tag name?

Answer 3

tag{}

Question 4

In CSS, how do you select an element by its id attribute?

Answer 4

id{}

Question 5

What CSS properties make up the box model?

Answer 5

border
margin
padding
content

Question 6

Which CSS property pushes boxes away from each other?

Answer 6

Margin

Question 7

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

Answer 7

Padding

Question 8

What is a pseudo-class?

Answer 8

A keyword added to a selector that specifies a special state of the selected element

Question 9

What are CSS pseudo-classes useful for?

Answer 9

They allow to change the appearance when a user is interacting with them

Question 10

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

Answer 10

font-family

Question 11

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

Answer 11

Horizontal

Question 12

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

Answer 12

No-Wrap

Question 13

What are all of justify-content values?

Answer 13

flex-start (items align to left)
flex-end (items align to right)
center (items align to center)
space-between (items have equal spacing)
space-around (items have spacing around them)
space-evenly (container and items spaced evenly)

Question 14

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

Answer 14

Because they are block level elements

Question 15

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

Answer 15

Horizontal

Question 16

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

Answer 16

Row
Column
Container

Question 17

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

Answer 17

1

Question 18

What is the purpose of a container?

Answer 18

They will hold columns and rows

Question 19

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

Answer 19

Static

Question 20

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

Answer 20

It doesn’t

Question 21

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

Answer 21

It doesn’t it’ll still be relative to where it would’ve been

Question 22

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

Answer 22

It gets removed from the document flow

Question 23

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

Answer 23

It ignores the space it would be taking up

Question 24

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

Answer 24

By setting a relative

Question 25

What are the four box offset properties?

Answer 25

Top Right Bottom Left

Question 26

z-index

Answer 26

A z-index will allow you to determine how containers are stacked

Question 27

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

Answer 27

The order CSS gets applied

Question 28

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

Answer 28

inheritance

Question 29

Why is using !important considered bad practice?

Answer 29

It reverses the cascade order of the stylesheet

Question 30

What are the four components of "the Cascade".

Answer 30

Source Order Inheritance Specificity !importance

Question 31

What does the transform property do?

Answer 31

It lets you rotate, scale, skew, or translate an element.

Question 32

Give four examples of CSS transform functions.

Answer 32

rotate() scale() matrix() translate()

Question 33

Give four examples of CSS transform functions.

Answer 33

rotate() scale() matrix() translate()

Question 34

The transition property is shorthand for which four CSS properties?

Answer 34

delay duration timing-function property

Question 35

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

Answer 35

screen width

Question 36

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

Question 37

What is a breakpoint in responsive Web design?

Answer 37

A point where you would want the @media to be applied

Question 38

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 38

Using percentages will give you a more accurate measurement

Question 39

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 39

All @mediia rules have the same weight so whatever is last takes the soruce

Question 40

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 40

All @mediia rules have the same weight so whatever is last takes the source order