CSS

Question 1

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

Answer 1

○ ruleset: css selector, declaration block, declaration, property, and value

Question 2

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

Answer 2

○ .classname (with a dot)

Question 3

In CSS, how do you select elements by their type?

Answer 3

○ typename (nothing additional)

Question 4

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

Answer 4

○ #idname (with a #)

Question 5

Name three different types of values you can use to specify colors in CSS.

Answer 5

Color Keywords, RGB (Red Green Blue), and HSL (Hue Saturation Light)

Question 6

What CSS properties make up the box model?

Answer 6

○ Margin -> Border -> Padding -> Content (width + height)

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

Margin (takes the higher margin value)

Question 8

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

Answer 8

Padding

Question 9

What is a pseudo-class?

Answer 9

An implied class based off of a certain element’s state (i.e. hover).

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Changing styles based on what the user is doing or has done. Selecting a group of elements via a pattern to avoid creating new classes for each.

Question 11

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

Answer 11

px, pt, em, rem, %

Question 12

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

Answer 12

font-family

Question 13

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

Answer 13

○ row

Question 14

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

Answer 14

○ nowrap

Question 15

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

Answer 15

○ They are block-level elements.

Question 16

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

Answer 16

○ row

Question 17

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

Answer 17

○ static (normal)

Question 18

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

Answer 18

○ it doesn’t

Question 19

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

Answer 19

○ it doesn’t, with no offsets

Question 20

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

Answer 20

○ removed from document flow entirely

Question 21

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

Answer 21

○ sits in ancestor element’s top-left corner, with no offsets

Question 22

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

Answer 22

○ setting an ancestor to something non-static

Question 23

• What are the four box offset properties?

Answer 23

○ top, bottom, left, right (element position has to have non-static value)

Question 24

• What are the four components of “the Cascade”.

Answer 24

○ Source order, inheritance, specificity, !important

Question 25

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

Answer 25

○ rulesets will override similar selectors above it

Question 26

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

Answer 26

○ some properties are inherited by default

Question 27

• List the three selector types in order of increasing specificity.

Answer 27

○ type, class, ID

Question 28

• Why is using !important considered bad practice

Answer 28

○ it ruins the natural cascade flow

Question 29

• What does the transform property do?

Answer 29

○ modifies the coordinate space of the CSS

Question 30

• Give four examples of CSS transform functions.

Answer 30

○ rotate, translate, skew, scale

Question 31

• The transition property is shorthand for which four CSS properties?

Answer 31

○ transition-property, transition-duration, transition-timing-function, transition-delay

Question 32

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

Answer 32

○ min-width, orientation

Question 33

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

Answer 33

○ meta name=”viewport” content=”width=device-width, initial-scale=1”