CSS Flashcards

1
Q

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

A

declaration block, selector, properties, values

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

.attribute { (putting a period before the name of the class)

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

type { (type element name)

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

id { (type # with id)

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 Values
Hex Codes
Color Names

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

Border, Margin, Padding, Width, Height

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

class added to a selector that specifies a special state (ex: hover)

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

Let you apply a style to an element for events of users interacting with elements

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

px, rem, em

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 :left to right

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

What is align items in flexbox

A

top to bottom alignment

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

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

A

divs are block elements

17
Q

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

A

Row: left to right

18
Q

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

A

Container, Row, Column

19
Q

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

A

1 column

20
Q

What is the purpose of a container?

A

the purpose of the container is to be able organize the rows and container in a readable manner.

21
Q

What is the purpose of a row?

A

Row is used to show content of a vertical chunk within a container.

22
Q

What is the purpose of a column?

A

Represents the chunk of a page section in a horizontal view.

23
Q

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

A

position:static

24
Q

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

A

Doesn’t affect document flow.

25
Q

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

A

can move top, bottom, left, right and it will appear on the page depending on where you set it. (Where it was statically)

26
Q

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

A

the box or element is taken out of normal flow. Sibling elements ignore it.

27
Q

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

A

Positioned against the nearest non static ancestor.

28
Q

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

A

Set position relative to the ancestor.

29
Q

What are the four box offset properties?

A

top, bottom, left, right

30
Q

What are the four components of “the Cascade”.

A

Source Order, Inheritance, Specificity and !important

31
Q

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

A

Order of importance

32
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

the inheritance behavior

33
Q

List the three selector types in order of increasing specificity.

A

*global, .class, #id

34
Q

Why is using !important considered bad practice?

A

Extremely high specificity, so its very hard to override. Hard to design.

35
Q

What does the transform property do?

A

lets you rotate, scale, skew or translate an element.

36
Q

Give four examples of CSS transform functions.

A

matrix translate rotate and scale skew

37
Q

The transition property is shorthand for which four CSS properties?

A

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

38
Q

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

A

min-width, min-height, max-width

39
Q

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

A

viewport meta tag