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 a pseudo-class?

Answer 4

a class applied to a selector that specifies a special state of the selected element

Question 5

What are CSS pseudo-classes useful for?

Answer 5

applying styling based on user actions not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse

Question 6

What are some examples of a pseudo-class?

Answer 6

:hover, :active, :focus, :link, :visited

Question 7

Name at least two units of type size in CSS.

Answer 7

rem, px, pt

Question 8

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

Answer 8

font-family

Question 9

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

Answer 9

selector {property: value}

…declaration = property:value

Question 10

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

Answer 10

.class-name {
property: value
}

Question 11

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

Answer 11

p {
property: value
}

Question 12

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

Answer 12

#id-element {
  property: value
}

Question 13

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

Answer 13

rgb/a, color keywords (black, red, blue, etc), hex codes

Question 14

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

Answer 14

row

Question 15

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

Answer 15

nowrap (all flex items will be on one line)

Question 16

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

Answer 16

divs are block elements

Question 17

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

Answer 17

row

Question 18

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

Answer 18

position: static

Question 19

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

Answer 19

the element remains a part of the normal document flow

Question 20

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

Answer 20

• relative positioning moves an element in relation to where it would have been in normal flow
• if there are no other elements, there would be no change to its movement

Question 21

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

Answer 21

the element is taken out of the document flow and no longer affects the position of other elements on the page

Question 22

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

Answer 22

“top, bottom, left, and right” now tells us the distance the element should be from the containing element. rather than its relative position in the normal document flow

Question 23

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

Answer 23

“position: relative” on the element and container

Question 24

What are the four box offset properties?

Answer 24

top, bottom, left, right

Question 25

What are the four components of “the Cascade”?

Answer 25

1. source order
2. inheritance
3. specificity
4. important rule

Question 26

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

Answer 26

the rule that comes last is the one that will be applied

Question 27

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

Answer 27

inheritance: child elements inherit the property values of its parent element
- extra note: not all properties are inheritable!

Question 28

List the three selector types in order of increasing specificity

Answer 28

• 1. tag (type) selectors
• 2. class selectors
• 3. id selectors

Question 29

Why is using !important considered bad practice?

Answer 29

breaks the natural cascading in your stylesheets and makes debugging more difficult

Question 30

What does the “all” property indicate as a CSS rule?

Answer 30

allows you to control inheritance for all properties at once

e.g. p { all: revert; } would revert the style of p elements to the default

Question 31

What does the transform property do?

Answer 31

allows you to modify the appearance of HTML elements

Question 32

Give four examples of CSS transform functions.

Answer 32

• transform: translate();
• transform: scale();
• transform: rotate();
• transform: skew();

Question 33

The transition property is shorthand for which four CSS properties?

Answer 33

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

Question 34

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

Answer 34

width, min-width, height, color, etc

Question 35

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

Answer 35

viewport meta tag

Question 36

What is a breakpoint in responsive Web design?

Answer 36

the point of dimension at which the layout or design of the website will change

Question 37

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 37

• a percentage will change based on how wide the screen currently is
• a fixed width is static and will not change

Question 38

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 38

source order (order matters in CSS rules )