LFZ CSS Quiz

Question 1

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

Answer 1

Declarations

Question 2

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

Answer 2

.(name of class)

Question 3

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

Answer 3

(name of element)

Question 4

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

Answer 4

(name of id)

Question 5

What CSS properties make up the box model?

Answer 5

Margin, Border, 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 selector that specifies a special state of the selected element(s)

Question 9

What are CSS pseudo-classes useful for?

Answer 9

Styling elements based on states or intractability

Question 10

Name at least two units of type size in CSS.

Answer 10

em, pt, px, percent

Question 11

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

Answer 11

font-family

Question 12

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

Answer 12

Row

Question 13

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

Answer 13

no-wrap

Question 14

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

Answer 14

Static

Question 15

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

Answer 15

once the positioned element has taken its place in the normal flow, you can then modify its final position

Question 16

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

Answer 16

It appears like position: static, until you add some box offset properties.

Question 17

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

Answer 17

The element is removed from the document flow

Question 18

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

Answer 18

it is removed from the document flow and sits on top of everything.

Question 19

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

Answer 19

set the containing element’s position property to anything except static

Question 20

What are the four components of “the Cascade”.

Answer 20

Source order, inheritance, specificity, and !important

Question 21

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

Answer 21

the order that your CSS rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.

Question 22

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

Answer 22

set the property’s value to inherit.

Question 23

List the three selector types in order of increasing specificity.

Answer 23

element selector, class selector, id selector

Question 24

Why is using !important considered bad practice?

Answer 24

Because it makes debugging harder as it disrupts the natural order of the “Cascade”

Question 25

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

Answer 25

min-width, max- width

Question 26

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

Answer 26

viewport

Question 27

The transition property is shorthand for which four CSS properties?

Answer 27

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

Question 28

What is a breakpoint in responsive Web design?

Answer 28

The point at which the page changes

Question 29

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 29

changes in the width of the browser scale with the percentage

Question 30

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 30

Because rules created lower in the code override higher ones