CSS Quiz Questions Flashcards

1
Q

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

A

A selector, declaration block, 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

They allow you to edit elements on an HTML page

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

What are three important considerations for choosing fonts?

A

Readability, theme, fallback fonts

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

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

A

Incase the computer does not have the selected font

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

What CSS properties make up the box model?

A

margin, border, padding, content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
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
7
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
8
Q

What purpose does the CSS Cascade serve?

A

What styling will take priority

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

What is source order?

A

The order the css has been written

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

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

A

Mobile responsiveness (Phones)

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

What is inheritance?

A

When a child of an element gets a computed value that has been declared in the parent element

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

Why might CSS include the inheritance feature?

A

Timeliness

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

Is inheritance a good tool to use for styling? If so, on what occasions?

A

Yes. It cuts down on the amount of code you have to use, which saves time

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

What is the purpose of !important?

A

To override every style that has taken place prior

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

When is !important a good tool to use?

A

When it is crucial, but it is almost never to be used

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

What is specificity?

A

The strength of a specific css selector

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

How is specificity calculated?

A

through the weight of a css selector in the specificity hierarchy

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

Why might CSS include this feature?

A

To be more specific in choosing an element to style.

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

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

A

id, class, element from greatest specificity to least

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

What is the CSS Cascade?

A

inheritance, source order, specificity, and importance

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

What are CSS pseudo-classes useful for?

A

added to a selector that specifies a special state of the selected element(s)

22
Q

What does the transform property do?

A

It allows you to adjust how an element will look on the DOM

23
Q

What is the difference between the first-child pseudo selector and the last-child pseudo selector?

A

The first-child represents the first element among a group of sibling elements where as last represents the last element

24
Q

What is the LVHA order?

A

Link, visit, hover, active

25
Q

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

A

color slowly changing into different color, make an image grow or shrink, rotation of an element

26
Q

Why might transitions be a helpful effect for styling?

A

Helping your UI feel more comfortable for your user

27
Q

Are all properties able to be transitioned?

A

No not all properties are animatable

28
Q

What is the initial display property of divs?

A

block element

29
Q

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

A

display none is not visible on the page and doesn’t take up any space. Visibility hidden can’t be seen, but still takes up space on the document

30
Q

What is the difference between the block, inline block, and inline display properties?

A

block starts on a new line, inline starts on same line, and inline block is the same as inline, but can be resized

31
Q

Why are CSS resets helpful for cross browser compatibility?

A

It will make css more consistent with other browsers

32
Q

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

A

It can change your page in ways you wouldn’t want

33
Q

What is an argument against using CSS resets?

A

It can slow down pages

34
Q

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

A

Static positioning

35
Q

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

A

It moves it relative to where it would have started out. It does not affect document flow entirely.

36
Q

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

A

It gets removed from the page completely and snaps to the first non-static object.

37
Q

What are the box offset properties?

A

Top, bottom, left, and right

38
Q

What were floats originally designed for?

A

Float was originally designed to allow developers to float text around image elements similar to the way newspapers and magazines would display text.

39
Q

What are clears for with floats?

A

The clear property allows you to say that no element (within the same containing element) should touch the left or righthand sides of a box, which will start a new line

40
Q

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

A

Floats are a lot of work and its complicated.

41
Q

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

A

row

42
Q

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

A

nowrap

43
Q

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

A

Flexbox should be used for smaller design items rather than the whole webpage.

44
Q

Why is it important to use a grid system for CSS layouts?

A

Code is easier to read in a grid system.

45
Q

What are the three core parts of a grid system?

A

Container, row, column

46
Q

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

A

Percentages are useful for mobile responsiveness.

47
Q

What is a modal?

A

modal box is a scripted effect that allows you to overlay a small element over a website

48
Q

What are some use cases for modals?

A

Error: To alert users of an error.
Warning: To warn users of potentially harmful situations.
Data: To collect data from users.
Confirm or Prompt: To remind users to do something before moving on.
Helper: To inform users of important information.

49
Q

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

A

So it can’t be scrolled past

fun fact: you can sometimes delete the modal in the dev tools

50
Q

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

A

width and color

51
Q

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

A

meta viewport tag