CSS Flashcards

1
Q

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

A

properties, declaration block, selector, 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

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

A

Element-name (h1, body, article)

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

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

Hex codes, rgb values, and color names (less often: rgba)

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

What is the box model?

common interview question

A

how css interprets a box including margin, border, and padding

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

What CSS properties make up the box model?

A

Margin, border, padding

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

Which 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
10
Q

What is a pseudo-class?

A

It’s a keyword added to a selector that specifies a special state of the selected element(s)

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

What are CSS pseudo-classes useful for?

A

They apply a style to elements when interacted with by the user

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

Name at least two units of type size in CSS.

A

Pixels, percentages, and ems

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

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

A

Div elements are block elements

17
Q

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

A

row

18
Q

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

A

static

19
Q

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

A

It doesn’t affect document flow.

20
Q

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

A

It’s position is relative to where it’s normal placement

21
Q

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

A

The document acts like it doesn’t exist to other elements surrounding it

22
Q

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

A

Will position that element within the nearest non static parent if not the vp

23
Q

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

A

You can control where it is positioned by placing it within a non static positioned element

24
Q

What are the four box offset properties?

A

Top, bottom, left, right

25
Q

What are the four components of “the Cascade”.

A

Source order, inheritance, specificity, !important

26
Q

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

A

If multiple rules affect the same element then the latter rule in the stylesheet takes precedence over rules above that rule

27
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

If property isn’t an inherited property, then you can give that property a value of “inherit”

28
Q

List the three selector types in order of increasing specificity.

A

Id selectors > class selectors/attributes selectors/pseudo-classes > type selectors, pseudo-elements

29
Q

Why is using !important considered bad practice?

A

It’s bad practice because it can be hard to debug.

30
Q

What does the transform property do?

A

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

31
Q

Give four examples of CSS transform functions.

A

Translate, scale, skew, rotate, matrix, perspective

32
Q

The transition property is shorthand for which four CSS properties?

A

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

33
Q

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

A

Max-width and min-width

34
Q

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

A

meta name=”viewport” content=”width=device-width, initial-scale=1”

35
Q

What is a breakpoint in responsive Web design?

A

The points at which a media query is introduced

36
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 allows for more flexibility and will work for variety of different vp sizes

37
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

It comes later in the cascade source order so it is applied over the rule above it.

38
Q

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

A

Max-width and min-width

39
Q

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

A

meta name=”viewport” content=”width=device-width, initial-scale=1”