css

Question 1

what CSS properties make up the box model?

Answer 1

border, margin, padding

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 the default flex-direction of a flex container?

Answer 4

row

Question 5

what is the default flex-wrap of a flex container

Answer 5

nowrap

Question 6

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

Answer 6

selectors

Question 7

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

Answer 7

dot followed by the class name

Question 8

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

Answer 8

type selector

Question 9

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

Answer 9

pound sign followed by the id name

Question 10

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

Answer 10

hex, rgb, color keywords

Question 11

what is a pseudo-class?

Answer 11

noted by a colons to allow extra functionality to certain css selectors

Question 12

what are CSS pseudo-classes useful for?

Answer 12

hover, visited, etc elements, i.e., a different color for a hovered anchor tag, a set color for a visited anchored tag to indicated its been clicked

Question 13

name at least two units of type size in CSS

Answer 13

px, rem, em

Question 14

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

Answer 14

font family

Question 15

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

Answer 15

row

Question 16

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

Answer 16

nowrap

Question 17

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

Answer 17

sets as a division of content; vertically (one below the other continuously) is default

Question 18

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

Answer 18

row

Question 19

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

Answer 19

static (each block-level element sits on top of the next one)

Question 20

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

Answer 20

moves an element in relation to where it would have been in normal flow (i.e., top, left, bottom, right, in pixels, percentages, or ems)

Question 21

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

Answer 21

box is taken out of normal flow and no longer affects the position of other elements on the page; relative does no changes to element if you dont define the offset properties

Question 22

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

Answer 22

acts like it is not there

Question 23

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

Answer 23

not static; persistent; doesn’t affect it’s surrounding but overrides them; acts as 1 z-index above the other content (?)

Question 24

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

Answer 24

position relative; edit padding based on nearest ancestor block

Question 25

What are the four box offset properties?

Answer 25

top, bottom, left, or right

Question 26

What are the four components of “the Cascade”

Answer 26

1. Importance 2. Origin 3. Specificity 4. Position.

Question 27

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

Answer 27

that the order of CSS rules matter; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used

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; rule applies to all ancestor elements within the document; you can establish the basis for a consistent visual design with very little code; these styles will even apply to HTML you have yet to write; to make sure all elements inherit these properties from the global scope, I can use the universal selector and the inherit keyword

Question 29

List the three selector types in order of increasing specificity.

Answer 29

1. type selectors (i.e., h1), pseudo-elements (i.e., ::after) 2. classes (i.e., .bio), attribute selectors (i.e., [type=”text”]), pseudo-classes (i.e., :hover) 3. id selectors (#imgCorrection)
   although: inline styles override and have the highest specificity

Question 30

Why is using !important considered bad practice?

Answer 30

makes debugging more difficult by breaking the natural cascading in your stylesheets; when two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied;

disrupting the natural flow

avoids debugging; makes your stylesheet harder to maintain

it overrides specificity by giving a CSS value more weight than it naturally has

Question 31

what type of scope does css have?

Answer 31

a global scope and a local scope like javascript: the local scope has access to the parent and global scope

Question 32

What does the transform property do?

Answer 32

adjusting the element coordinate plane

Question 33

Give four examples of CSS transform functions.

Answer 33

rotate, translate, scale, skew, matrix, translateX, translateY

Question 34

The transition property is shorthand for which four CSS properties?

Answer 34

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

Question 35

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

Answer 35

height, width

Question 36

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

Answer 36

viewport tag

Question 37

What is a breakpoint in responsive Web design?

Answer 37

points at which a media query is introduced

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

layout flexibility/adaptability

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

specificity/precedence