CSS Flashcards

1
Q

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

A

selector, declaration block, property, property value, CSS Ruleset

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

with a .

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 type?

A

by just writing the name of the element

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

In CSS, how do you select elements by their ID?

A

with a #

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

Name 3 different types of values to specify colors in CSS

A

RGB, hex code, and 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

content, margin, padding, border

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

what 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

what CSS property adds 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

classes applied by the browser in certain conditions

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

styling as a result of user interaction

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

Name at least 2 units of type size in CSS

A

pt, 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 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

nowrap

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

because they are block

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 is the default value for the position property of HTML elements?

A

static

18
Q

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

A

maintains normal document flow

19
Q

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

A

it places the element located within the block in the same location

20
Q

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

A

absolutely destroys document flow

21
Q

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

A

the element appears on the top of the page if no other element is positioned

22
Q

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

A

relative needs a position value other than static

23
Q

What are the four box offset properties?

A

top, left, bottom, right

24
Q

What are the four components of “the Cascade”?

A

!Important, inheritance, source order, specificity

25
Q

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

A

Styling that comes lower in the style sheet, supersedes styling above it

26
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 inherit value

27
Q

List the three selector types in order of increasing specificity

A

Elements, class, and ID

28
Q

Why is using !important considered bad practice?

A

Because it makes it more difficult to debug

NEVER USE !IMPORTANT!

29
Q

What does the transform property do?

A

lets you modify the coordinate space of the selector with rotate, scale, skew and translate

30
Q

Give four examples of CSS transform functions.

A

matrix, translate, scale, rotate

31
Q

What does the transform property do?

A

Lets you modify the coordinate space of the selector with rotate, scale, skew and translate

32
Q

Give four examples of CSS transform functions.

A

Matrix, translate, scale, rotate

33
Q

The transition property is shorthand for which four CSS properties?

A

Transition-duration, transition-timing, transition-delay, and transition-property

34
Q

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

A

Min-width, max-width

35
Q

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

A

HTML viewport meta tag

36
Q

What is a breakpoint in responsive Web design?

A

The “point” usually in the width, at which the page will adjust the layout of the content to make it easier for the user to view and interact with

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 work for viewports with a range of different sizes

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