CSS Flashcards

1
Q

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

A

selector and declaration block (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

dot and whatever class name

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 node name or element type

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

pound or hashtag followed by id name

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

color-names, hex codes, or rgb values

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, actual content (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

a selector that selects elements that are in a specific 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

For style and accessibility.

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

px, ems, percentages

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 it’s a 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 are the four components of “the Cascade”.

A

Source order
Specificity
Inheritance
Importance

18
Q

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

A

the order that your CSS rules are written in your stylesheet.

19
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 selector

20
Q

List the three selector types in order of increasing specificity.

A

type, class, ID,

21
Q

Why is using !important considered bad practice?

A

it’ll make debugging hell, it ruins everything

22
Q

What does the transform property do?

A

The transform property applies a 2D or 3D transformation to an element.

23
Q

Give four examples of CSS transform functions.

A

matrix, rotate, scale, translate, skew

24
Q

The transition property is shorthand for which four CSS properties?

A

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

25
Q

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

A

min-width, max-width

26
Q

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

A

he HTML Viewport meta tag is used for creating responsive website. So that web page can adjust its width according to viewport.

27
Q

What is a breakpoint in responsive Web design?

A

the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience

28
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

future proofing

29
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

order matters, go big to small or small to big