CSS

Question 1

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

Answer 1

The CSS Selector, Declaration block, property and value.

Question 2

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

Answer 2

To select by class attribute you use the dot operator e.g. ‘.class’.

Question 3

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

Answer 3

To select an element by type you use it as the selector e.g. ‘h1’.

Question 4

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

Answer 4

To select an element by ID you use ‘#’ e.g. ‘#ID’.

Question 5

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

Answer 5

You can specify colors with Hex, rgba(), and keywords.

Hsl() is also an option.

Question 6

What is a pseudo-class?

Answer 6

A psuedo-class is used to define special states of an element. e.g. ‘:hover’.

Question 7

What are CSS pseudo-classes useful for?

Answer 7

Pseudo classes are useful for decorating smaller scale, reactive parts of an element.

Question 8

What CSS properties make up the box model?

Answer 8

The box model properties are: Margin, Border, Padding, and Content.

Question 9

Which CSS property pushes boxes away from each other?

Answer 9

The Margin property pushes boxes away from each other.

Question 10

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

Answer 10

The Padding property adds space between a box’s content and its border.

Question 11

Name at least two units of type size in CSS.

Answer 11

Font size can use all ‘length’ units. e.g. ‘em, px, %, pt’.

Question 12

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

Answer 12

The Font-family property controls the font used for an element.

Question 13

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

Answer 13

The default value for flex-direction is ‘row’.

Question 14

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

Answer 14

The default value of flex-wrap is ‘nowrap’.

Question 15

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

Answer 15

Div elements vertically stack because their display type is ‘block’.

Question 16

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

Answer 16

The default value of position is ‘static’.

Question 17

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

Answer 17

Setting the value of position to ‘relative’ will not affect document flow.

Question 18

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

Answer 18

Setting the value of position to ‘relative’ will not affect where it appears on the page.

Question 19

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

Answer 19

Setting the value of position to ‘absolute’ will remove the element from document flow.

Question 20

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

Answer 20

Setting the value of position to ‘absolute’ will place the element at the top of its container.

Question 21

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

Answer 21

An absolutely positioned element will be constrained to any other container with a value other than ‘static’.

Question 22

What are the four box offset properties?

Answer 22

The four box offset properties are: top, right, bottom, left.