CSS

Question 1

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

Answer 1

Selector, declaration block, properties, values

Question 2

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

Answer 2

.className

Question 3

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

Answer 3

elementName

Question 4

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

Answer 4

idName, octothorpe

Question 5

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

Answer 5

Hex, rgb, color name, rgba, (HSL, hsla (not used frequently))

Question 6

What CSS properties make up the box model?

Answer 6

Border, margin, padding, (content: width and height)

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

margin

Question 8

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

Answer 8

padding

Question 9

What is a pseudo-class?

Answer 9

A class that is applied by the browser to an element in a specific circumstance. They can change the appearance of elements when the user interacts with them.

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Styling elements based on user actions

Question 11

Name at least two units of type size in CSS.

Answer 11

Percentage, pixels, em, 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 “div” is a block-level element

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 does not affect document flow

Question 19

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

Answer 19

It positions an element relative to where it would normally be in the document flow

Question 20

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

Answer 20

It is removed from the document flow entirely

Question 21

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

Answer 21

It removes it from the document flow and positions it within the first non-static ancestor

Question 22

How does setting position: fixed on an element affect both document flow and where it appears on the page?

Answer 22

It removes it from the document flow just like position: absolute. However, it positions the element in relation to the viewport instead of the first non-static ancestor

Question 23

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

Answer 23

Set position: relative; on the containing block

Question 24

What are the four box offset properties?

Answer 24

Top, right, bottom, left