CSS

Question 1

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

Answer 1

selector, declaration block {property, value}

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

write the element name

Question 4

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

Answer 4

id

Question 5

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

Answer 5

RGB
Hexadecimal
Color Name

Question 6

What CSS properties make up the box model?

Answer 6

border, margin, padding, width, 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

keyword added to a selector that specifies a special state of the selected element(s)/changes the appearance of elements when a user is interacting with them

Question 10

What are CSS pseudo-classes useful for?

Answer 10

applying styling based on user interaction

applying styling based on the structure of the html document (nth child)

Question 11

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

Answer 11

px
rem
em
percentage

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

Flex items with all try to fit onto one line (nowrap)

Question 15

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

Answer 15

Because they are block elements and each element takes up the full available width.

Question 16

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

Answer 16

row

Question 17

What two pieces of styling are added to the container class?

Answer 17

margin: auto

max-width

Question 18

What type of styling is applied to a row class?

Answer 18

display: flex

Question 19

What’s the purpose of the container class?

Answer 19

To set the boundaries that’s going to hold the content

Question 20

What’s the purpose of the row class?

Answer 20

to set up vertical content

Question 21

What’s the purpose of the column class?

Answer 21

To set up the boundaries of horizontal content

Question 22

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

Answer 22

static

everything flows normally

Question 23

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

Answer 23

It moves an element in relation to where it would have been in normal flow, shifting it to the top, right bottom or left of where it would have been place (dependent on the settings that you choose)

Question 24

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

Answer 24

It doesn’t affect the position of surrounding elements; they stay in the position they would be in normal flow

Question 25

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

Answer 25

It does not affect the position of any surrounding elements (they simply ignore the space it would’ve taken up). Absolutely positioned elements move as users scroll up and down the page.
No longer a part of normal document flow–everything ignores it as if it doesn’t exist

Question 26

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

Answer 26

It positions the element in relation to its containing element.
Sits at the top of its nearest ancestor that is not static

Question 27

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

Answer 27

Set a position property on the container element (the ancestor element) that’s not static

Question 28

What are the four box offset properties?

Answer 28

top
left
right
bottom

Question 29

Which positioning property causes the least amount of affect/chaos?

Answer 29

relative

Question 30

What are the four components of “the Cascade”.

Answer 30

1. Source order
2. Inheritance
3. Specificity
4. !important

Question 31

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

Answer 31

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 32

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

Answer 32

inheritance

Question 33

List the three selector types in order of increasing specificity.

Answer 33

type –> class –> id

Question 34

Why is using !important considered bad practice?

Answer 34

You’re bypassing all the preset rules

Question 35

What does the transform property do?

Answer 35

lets you rotate, scale, skew, or translate an element by modifying the coordinate space of the CSS visual formatting model. (where it is in coordinate space)

Question 36

Give four examples of CSS transform functions.

Answer 36

translate
scale
rotate
skew

Question 37

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

Answer 37

width

height

Question 38

Reading:
Media ruleset only media type “screen” and media feature “min-width” with value 768 px

@media only screen and (min-width: 768 px) {

Question 39

What is a breakpoint in responsive Web design?

Answer 39

The point at which you want to use a media query to change the design to a better one for the space you have available

Question 40

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 40

It’s relative to whatever device/screen you’re on (adaptability)

Question 41

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 41

Because of source order-the bottom one wins out