CSS

Question 1

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

Answer 1

Selector and Declaration

Question 2

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

Answer 2

RGB Values, Hex Codes, Color Names

Question 3

What CSS properties make up the box model?

Answer 3

border, margin, and padding

Question 4

What is a pseudo-class?

Answer 4

A selector that attracts elements in special state such as hover or focus. It is something the browser does.

Question 5

What are CSS pseudo-classes useful for?

Answer 5

Let us write less code for styling.

Question 6

Name at least two units of type size in CSS.

Answer 6

pixels, percentages, ems

Question 7

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

Answer 7

font-family

Question 8

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

Answer 8

horizontal

Question 9

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

Answer 9

nowrap, all items will try to fit on one line

Question 10

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

Answer 10

Because they are block elements

Question 11

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

Answer 11

row

Question 12

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

Answer 12

Static

Question 13

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

Answer 13

It moves the item it was applied to, but doesn’t affect the rest of the document flow.

Question 14

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

Answer 14

It makes the element get positioned relative to where it would be in the normal document flow.

Question 15

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

Answer 15

Surrounding elements ignore the space the absolute positioned element would have taken up. The absolute item no longer has a place in the document flow.

Question 16

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

Answer 16

The element is placed relative to where it is in its containing element, so make sure the containing element is set to relative also. It will go back to the first HTML element that is not static.

Question 17

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

Answer 17

set position of containing element relative to the current element

Question 18

What are the four box offset properties?

Answer 18

top, right, bottom, left

Question 19

What are the four components of “the Cascade”.

Answer 19

Source Order, Inheritance, Specificity, & !important

Question 20

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

Answer 20

Source order is, simply put, 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 21

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

Answer 21

Inheritance is the process by which certain CSS properties on a child HTML element can receive value from a parent element, if no CSS for that property is directly declared on the child element.

Question 22

List the three selector types in order of increasing specificity.

Answer 22

Type, Class, ID

Question 23

Why is using !important considered bad practice?

Answer 23

It causes issues with debugging by breaking the natural cascade of style sheet

Question 24

What is a breakpoint in responsive Web design?

Answer 24

The points at which a media query is introduced are known as breakpoints.

Question 25

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 25

You don’t have to know the pixel count for every screen size.

It is called fluid design.

Question 26

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 26

CSS Source Order picks whatever is last in document