CSS Flashcards

1
Q

What is the purpose of the CSS inherit property?

A

Certain attributes are not automatically inherited, those can be forced to inherit using this property.

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

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

A

Named colors / Hex / RGB

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

What CSS properties make up the box model?

A

Content / Padding / Border / Margin

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

Which CSS property add space between a box’s content and its border?

A

Padding.

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

What does “Border Box” accomplish?

A

It includes the border and padding into the total width and height.

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

What is a pseudo-class?

A

To target a special state of an element.

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

What are CSS pseudo-classes useful for?

A

To change the styling of elements.

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

How do you declare direct child in CSS selector?

A

a > b

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

How do you declare descendant in CSS selector?

A

a b

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

Name at least two units of type size in CSS.

A

px / rem

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

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

A

font-family

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

What does “margin: auto” do?

A

Centers the item on the page horizontally if the element has been given a width.

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

What is justify-content used for?

A

How the group of items should appear on the page horizontally.

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

What is align-content used for?

A

How the group of items should appear on the page vertically.

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

What is align-items used for?

A

How each individual item should be displayed on the vertical axis.

17
Q

What is flex-basis used for?

A

The width of each item.

18
Q

When would it be ok to wrap input in a label?

A

With radio and checkbox

19
Q

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

A

Because they are block elements.

20
Q

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

A

Row.

21
Q

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

A

No wrap.

22
Q

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

A

Static.

23
Q

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

A

Doesn’t affect.

24
Q

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

A

Moves it from where it would normally be.

25
Q

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

A

Removes it from the document flow.

26
Q

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

A

It positions itself in with it’s non-static parent.

27
Q

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

A

By giving it measurements from top, bottom, left etc.

28
Q

What are the four box offset properties?

A

Top / bottom / left / right

29
Q

What are the four components of “the Cascade”.

A

source order / inheritance / specificity / !important

30
Q

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

A

Where in your css file it is located,

lower down = more important

31
Q

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

A

Inheritance

32
Q

List the three selector types in order of increasing specificity.

A

elements / class / id

33
Q

Why is using !important considered bad practice?

A

Makes debugging more difficult because it ignores the rules

34
Q

Difference between * and body for css selectors

A
  • will apply to everything, even properties that are not inherited, body will only apply inherited properties to everything
35
Q

The transition property is shorthand for which four CSS properties?

A

transition-property, transition-duration, transition-timing-function, and transition-delay.

36
Q

What is a breakpoint in responsive Web design?

A

A point that it reaches where something has to change

37
Q

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?

A

It will adjust well for any size in that range

38
Q

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?

A

Source order

39
Q

Where do you generally place the transition property

A

On the element itself, not on :hover