CSS

Question 1

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

Answer 1

selector, declaration block, property, property value, CSS Ruleset

Question 2

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

Answer 2

with a .

Question 3

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

Answer 3

by just writing the name of the element

Question 4

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

Answer 4

with a #

Question 5

Name 3 different types of values to specify colors in CSS

Answer 5

RGB, hex code, and name

Question 6

What CSS properties make up the box model?

Answer 6

content, margin, padding, border

Question 7

what CSS property pushes boxes away from each other?

Answer 7

margin

Question 8

what CSS property adds space between a box’s content and its border?

Answer 8

padding

Question 9

what is a pseudo-class?

Answer 9

classes applied by the browser in certain conditions

Question 10

what are CSS pseudo classes useful for?

Answer 10

styling as a result of user interaction

Question 11

Name at least 2 units of type size in CSS

Answer 11

pt, px, 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

because they are block

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

maintains normal document flow

Question 19

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

Answer 19

it places the element located within the block in the same location

Question 20

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

Answer 20

absolutely destroys document flow

Question 21

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

Answer 21

the element appears on the top of the page if no other element is positioned

Question 22

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

Answer 22

relative needs a position value other than static

Question 23

What are the four box offset properties?

Answer 23

top, left, bottom, right

Question 24

What are the four components of “the Cascade”?

Answer 24

!Important, inheritance, source order, specificity

Question 25

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

Answer 25

Styling that comes lower in the style sheet, supersedes styling 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

The inherit value

Question 27

List the three selector types in order of increasing specificity

Answer 27

Elements, class, and ID

Question 28

Why is using !important considered bad practice?

Answer 28

Because it makes it more difficult to debug NEVER USE !IMPORTANT!

Question 29

What does the transform property do?

Answer 29

lets you modify the coordinate space of the selector with rotate, scale, skew and translate

Question 30

Give four examples of CSS transform functions.

Answer 30

matrix, translate, scale, rotate

Question 31

What does the transform property do?

Answer 31

Lets you modify the coordinate space of the selector with rotate, scale, skew and translate

Question 32

Give four examples of CSS transform functions.

Answer 32

Matrix, translate, scale, rotate

Question 33

The transition property is shorthand for which four CSS properties?

Answer 33

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

Question 34

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

Answer 34

Min-width, max-width

Question 35

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

Answer 35

HTML viewport meta tag

Question 36

What is a breakpoint in responsive Web design?

Answer 36

The “point” usually in the width, at which the page will adjust the layout of the content to make it easier for the user to view and interact with

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

It will work for viewports with a range of different sizes

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