CSS

Question 1

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

Answer 1

Ruleset: selector, code block, property:value

Question 2

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

Answer 2

. class name

Question 3

In CSS, how do you select elements by their tag name?

Answer 3

tag name

Question 4

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

Answer 4

id name

Question 5

What CSS properties make up the box model?

Answer 5

Padding, Borders, Margins

Question 6

Which CSS property pushes boxes away from each other?

Answer 6

Margins

Question 7

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

Answer 7

Padding

Question 8

What is a pseudo-class?

Answer 8

A keyword that let’s you apply a style to an element

Question 9

What are CSS pseudo-classes useful for?

Answer 9

To style an element in relation to the content and also in relation to external factors

Question 10

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

Answer 10

pixels, em/rem

Question 11

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

Answer 11

Row

Question 12

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

Answer 12

Put everyone on one row

Question 13

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

Answer 13

Because they are block elements

Question 14

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

Answer 14

Row

Question 15

What are the three primary components of a page layout (which helper classes do you need?)

Answer 15

Container, row, column

Question 16

What is the minimum number of “columns” that you should put in a “row”?

Answer 16

One

Question 17

What is the purpose of a “container”?

Answer 17

To contain the whole layout and give a minimum weight

Question 18

What is the “default” value of the |position| property of HTML elements?

Answer 18

Static

Question 19

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

Answer 19

Flow stays the same

Question 20

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

Answer 20

It moves the element around it’s start position

Question 21

How does setting |position: absolute| affect document flow?

Answer 21

It’s taken out of the document flow

Question 22

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

Answer 22

It’s confined to it’s first non-static ancestor

Question 23

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

Answer 23

By making the block |position: relative|

Question 24

What are the four components of “the Cascaade”?

Answer 24

Source order, inheritance, specificity, importence

Question 25

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

Answer 25

Order of code written

Question 26

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

Answer 26

Inheritance

Question 27

List the three selector types in order of increasing specificity.

Answer 27

Type, class, ID

Question 28

Why is using |!important| considered bad practice?

Answer 28

It could prevent other developers with writing plug-ins or frameworks

Question 29

What is a "model"?

Answer 29

A copy of the web page made in memory

Question 30

Which "document" is being referred to in the phrase "Document Object Model"?

Answer 30

A webpage

Question 31

Which "object" is being referred to in the phrase "Document Object Model"?

Answer 31

The DOM tree

Question 32

What is a DOM Tree?

Answer 32

A model made of many objects.

Question 33

Give 2 examples of a |document| method that retrieve a single element from the DOM.

Answer 33

getElementById() / querySelector()

Question 34

Give 1 example of a |document| method that retrieve multiple elements from the DOM at once.

Answer 34

querySelectorAll()

Question 35

Why might you want to assign the return value of a DOM query to a variable?

Answer 35

If you need to work with the element more than once

Question 36

What |console| method allows you to inspect the properties of a DOM element object?

Answer 36

console.dir()

Question 37

Why would a |