CSS Flashcards

1
Q

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

A

selector, declaration, property, value

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

.nameofelement {}

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

h1, h2, h3 {} (matches element names)

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

nameofidattribute{}

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

name colors, rgb, hexcode

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

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

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

When a keyword is added, selected elements will show a special state

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

lets you apply a style to an element as a result of user interaction/action

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

rem, px

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

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

A

font-size

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

A

Static position

18
Q

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

A

normal

19
Q

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

A

same location if no direction is applied

20
Q

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

A

Removed entirely from document flow

21
Q

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

A

anything but static

22
Q

How does the constrain an absolutely positioned element to an containing block?

A

element’s box become the nearest block container ancestor to those boxes

23
Q

What are the four offset properties?

A

top, left, right, bottom

24
Q

What are the four components of “the Cascade”?

A

Source Order, Inheritance, Specificity & !importance

25
Q

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

A

the order in which you put your rules in your CSS, lower succeeds top

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

force properties to inherit (ex. padding: inherit;)

27
Q

List the three selector types in order of increasing specificity.

A

type, class, id

28
Q

Why is using !important considered a bad practice?

A

makes debugging more default because it breaks the normal cascade rules

29
Q

What does the transform property do?

A

applies to the css property that you choose and lets you modify the coordinate space (X, Y, & Z)

30
Q

Give four examples of CSS transform functions.

A

matrix, translate, scale, rotate, skew

31
Q

The transition property is shorthand for which four CSS properties?

A

property, timing function, duration, delay

32
Q

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

A

min-width, max-width

33
Q

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

A

viewport

34
Q

What is the breakpoint in responsive Web design?

A

point where near styling is being applied

35
Q

What is the advantage of using a percentage (eg. 50%) width instead of fixed (eg px) for a “column” class in a responsive layout?

A

made for screen size vs pixels

36
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 to overwrite