LearningFuze Mod 1 - CSS

Question 1

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

Answer 1

selector and deceleration

Question 2

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

Answer 2

. then class selector

Question 3

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

Answer 3

add the name of the tag

Question 4

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

Answer 4

then the selector

Question 5

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

Answer 5

rgb values, hex codes and color names

Question 6

What CSS properties make up the box model?

Answer 6

Border, margin and padding

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

The margin property

Question 8

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

Answer 8

The padding property

Question 9

What is a pseudo-class?

Answer 9

It changes the appearance of elements when a user interacts with them

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Creates an interactive webpage

Question 11

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

Answer 11

Pixels and 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, all items will try to fit on one line

Question 15

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

Answer 15

Because they are block 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

Question 18

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

Answer 18

It moves the item it was applied to, but doesn’t affect the rest of the document flow.

Question 19

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

Answer 19

It makes the element get positioned relative to where it would be in the normal document flow.

Question 20

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

Answer 20

Surrounding elements ignore the space the absolute positioned element would have taken up. The absolute item no longer has a place in the document flow.

Question 21

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

Answer 21

The element is placed relative to where it is in its containing element, so make sure the containing element is set to relative also. It will go back to the first HTML element that is not static.

Question 22

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

Answer 22

You must apply a non-static position

Question 23

What are the four box offset properties?

Answer 23

top, right, bottom, and left

Question 24

What are the four components of “the Cascade”.

Answer 24

Source order, inheritance, specify and importance

Question 25

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

Answer 25

** Need to fill in **

Question 26

List the three selector types in order of increasing specificity.

Answer 26

Type, Class and ID

Question 27

Why is using !important considered bad practice?

Answer 27

Making debugging more difficult

Question 28

What does the transform property do?

Answer 28

It modifies the coordinate space of the CSS visual formatting model.

Question 29

Give four examples of CSS transform functions.

Answer 29

rotate, scale, skew, or translate

Question 30

The transition property is shorthand for which four CSS properties?

Answer 30

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

Question 31

What is a breakpoint in responsive Web design?

Answer 31

Points at which a media query is introduced

Question 32

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 32

there will be fewer width properties, px measurement needs to be exact for different devices

Question 33

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 33

because of the cascade facet, source order

Question 34

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

Answer 34

color and device-height

Question 35

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

Answer 35

view port meta tag