CSS Flashcards

1
Q

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

A

selector, property, value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How are key/value pairs related to CSS?

A

properties and their values

color: pink

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

RGB, hex, color name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are three important considerations for choosing fonts?

A

Readability, theme

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

in case the user browser does not support that font family

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What CSS properties make up the box model?

A

margin, padding, border

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Which CSS property pushes boxes away from each other?

A

Margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Which CSS property pushes box content away from its border?

A

Padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What purpose does the CSS Cascade serve?

A

Determine what styling is applied

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is source order?

A

Last css rule has most precedence

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

mobile responsiveness??

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the purpose of !important?

A

Make any property

have extreme precedence.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

When is !important a good tool to use?

A

Almost never. CSS Libraries sometimes call for it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is specificity?

A

How the browser decides what element gets what styling

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How is specificity calculated?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Why might CSS include this feature?

A

Makes a check and balance to source order

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

element-class-id-inline-!important

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is the CSS Cascade?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What are CSS pseudo-classes useful for?

A

Make dynamic styling

20
Q

What does the transform property do?

A

Can dynamically move

21
Q

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

A

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

22
Q

Why might transitions be a helpful effect for styling?

A

Easy animation creation

23
Q

Are all properties able to be transitioned?

A

NO

24
Q

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

A

Block

25
Q

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

A

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

26
Q

Why are CSS resets helpful for cross browser compatibility?

A

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

27
Q

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

A

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

28
Q

What is an argument against using CSS resets?

A

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

29
Q

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

A

static

30
Q

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

A

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

31
Q

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

A

positions against first parent non-static element

removes itself from regular document flow entirely

32
Q

What are the box offset properties?

A

top, bottom, left, right

33
Q

What were floats originally designed for?

A

Wrapping text around images in articles easily.

34
Q

What are clears for with floats?

A

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

35
Q

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

A

Floated elements no longer are part of the document flow

36
Q

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

A

Row (left-right, top-bottom

37
Q

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

A

No wrap

38
Q

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

A

Cannot easily scale it well

39
Q

What are the three core parts of a grid system?

A

container, row, column

40
Q

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

A

So different screens display the same

41
Q

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

A

It would be a pain

42
Q

What is a modal?

A

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

43
Q

What are some use cases for modals?

A

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

44
Q

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

A

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

45
Q

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

A

min-width, max-width

46
Q

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

A