CSS Flashcards

1
Q

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

A

properties

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

In CSS, how do you select elements by their class attribute?

A

use “.”

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

In CSS, how do you select elements by their tag name?

A

simply state the tag

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

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

A

use “#”

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

What is a pseudo-class?

A

keyword added to a selector which specifies a special state of the selected element

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

What are CSS pseudo-classes useful for?

A

designing elements based off specific instances

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

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

A

rem, em, px, %

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 is the default flex-direction of a flex container?

A

row

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

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

A

no-wrap

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

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

A

they are block elements

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

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

A

row

17
Q

What are the three primary components of a page layout? (Which helper classes do you need?)

A

container, row, column

18
Q

What is the minimum number of columns that you should put in a row?

A

1

19
Q

What is the purpose of a container?

A

acts as a formatter for the document

20
Q

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

A

static

21
Q

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

A

affects flow as it is moved relative to where it normally would have been

22
Q

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

A

relative to where it would have originally been on the page

23
Q

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

A

does not affect the flow, it is taken out of flow and other elements don’t notice it

24
Q

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

A

it is now relative to its containing element

25
Q

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

A

make it’s container “position: relative”

26
Q

What are the four box offset properties?

A

top, right, bottom, left

27
Q

What are the four components of “the Cascade”.

A

source order, specificity, inheritance and importance

28
Q

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

A

the order in which a property was vertically assigned a value for a specific selector

29
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

inheritence

30
Q

List the three selector types in order of increasing specificity.

A

type, class, ID

31
Q

Why is using !important considered bad practice?

A

missed in updates, also takes extra steps to accomplish this