CSS

Question 1

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

Answer 1

selector, property, value

Question 2

How are key/value pairs related to CSS?

Answer 2

properties and their values

color: pink

Question 3

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

Answer 3

RGB, hex, color name

Question 4

What are three important considerations for choosing fonts?

Answer 4

Readability, theme

Question 5

Why must you have backup fonts assigned when selecting custom fonts?

Answer 5

in case the user browser does not support that font family

Question 6

What CSS properties make up the box model?

Answer 6

margin, padding, border

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

Margin

Question 8

Which CSS property pushes box content away from its border?

Answer 8

Padding

Question 9

What purpose does the CSS Cascade serve?

Answer 9

Determine what styling is applied

Question 10

What is source order?

Answer 10

Last css rule has most precedence

Question 11

In what situations might you need to apply styling to a single element multiple times in one stylesheet?

Answer 11

mobile responsiveness??

Question 12

What is the purpose of !important?

Answer 12

Make any property

have extreme precedence.

Question 13

When is !important a good tool to use?

Answer 13

Almost never. CSS Libraries sometimes call for it.

Question 14

What is specificity?

Answer 14

How the browser decides what element gets what styling

Question 15

How is specificity calculated?

Answer 15

0-0-0 column being id-class-element

Question 16

Why might CSS include this feature?

Answer 16

Makes a check and balance to source order

Question 17

What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?

Answer 17

element-class-id-inline-!important

Question 18

What is the CSS Cascade?

Answer 18

all factors used by CSS to determine the styling applied (inheritance, specificity, source order)

Question 19

What are CSS pseudo-classes useful for?

Answer 19

Make dynamic styling

Question 20

What does the transform property do?

Answer 20

Can dynamically move

Question 21

What are 3 examples of what can be done with CSS transitions?

Answer 21

Scale an item over time, change the color over time, change styling over time

Question 22

Why might transitions be a helpful effect for styling?

Answer 22

Easy animation creation

Question 23

Are all properties able to be transitioned?

Answer 23

NO

Question 24

What is the initial display property of <div>s?</div>

Answer 24

Block

Question 25

What is the difference between display: none and visibility: hidden?

Answer 25

display: none the element is completely hidden and the space it takes up is collapsed. visibility:hidden hides the element but it still takes up space

Question 26

Why are CSS resets helpful for cross browser compatibility?

Answer 26

Makes sure all browsers display your styles the same and properly across different browsers

Question 27

Why is it important to be mindful of what you reset with your CSS resets?

Answer 27

If you reset a css functionality that you want to use later on , there will be issues

Question 28

What is an argument against using CSS resets?

Answer 28

It takes a little longer for the browser to load the page.

Question 29

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

Answer 29

static

Question 30

How does setting position relative on an element affect document flow and where the element appears on the page?

Answer 30

positions itself relative to where the element would appear in a static docflow

Question 31

How does setting position absolute on an element affect document flow and where the element appears on the page?

Answer 31

positions against first parent non-static element removes itself from regular document flow entirely

Question 32

What are the box offset properties?

Answer 32

top, bottom, left, right

Question 33

What were floats originally designed for?

Answer 33

Wrapping text around images in articles easily.

Question 34

What are clears for with floats?

Answer 34

Clears enable elements that follow a float to see the float they are following

Question 35

What are some of the downsides for using floats in layout design?

Answer 35

Floated elements no longer are part of the document flow

Question 36

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

Answer 36

Row (left-right, top-bottom

Question 37

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

Answer 37

No wrap

Question 38

Why should flexbox not be used for building complete web page layouts?

Answer 38

Cannot easily scale it well

Question 39

What are the three core parts of a grid system?

Answer 39

container, row, column

Question 40

Why is it a good idea to use percentages for grid column widths?

Answer 40

So different screens display the same

Question 41

How do you think building this layout would be different without a grid system?

Answer 41

It would be a pain

Question 42

What is a modal?

Answer 42

Its piece of information we want the user to focus on before interacting with the rest of the page

Question 43

What are some use cases for modals?

Answer 43

Stop the user from interacting with the entire page until the popup is dealt with

Question 44

Why does a modal usually need to occupy the entire height and width of the viewport?

Answer 44

Cover over the entire page to block its content until the modal is dealt with

Question 45

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

Answer 45

min-width, max-width

Question 46

Which HTML meta tag is used in mobile-responsive web pages?