CSS Flashcards

1
Q

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

A

There are selectors, properties, and values (which is the declaration block) and all together it is known as a CSS rule set.

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

Using a “ . “ and then the value of the attribute, followed by a declaration block.

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

Using the given node name, followed by a declaration block.

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

Using a “#” and then the value of the attribute, followed by a declaration block.

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 (red, green, blue) values, hex codes, and 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

padding, border, margin, height, width

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 controls the gap between boxes.

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

The padding property allows you to specify how much space should appear between the content and its border.

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

What is a pseudo-class?

A

It is a keyword that can be added to a selector to change the appearance of an element with a specific action like :hover, :active, :focus.

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

Useful for event-based styling and …

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

Pixels, percentages, EMs

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

It is from 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

All flex items will be on one line. Its value is “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 level 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, filling in from left to right

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

It does not have an effect at first.

19
Q

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

A

It sets it in relation to the relative position.

20
Q

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

A

It removes it from the document flow. It is almost like they do not exist in relation to the other content on the page.

21
Q

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

A

It is positioned relative to the body/container.

22
Q

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

A

It is set to the a parent element that is non-static (relative).

23
Q

What are the four box offset properties?

A

Top, bottom, left, right

24
Q

What are the four components of “the Cascade”.

A

Source order, inheritance, specificity, and !important

25
Q

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

A

it means in which order the rule set is applied to the stylesheet. bottom being dominant.

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

some are already applied by default, but “inherit” or even “all”.

27
Q

List the three selector types in order of increasing specificity.

A

type selectors, class selectors, then ID selectors

28
Q

Why is using !important considered bad practice?

A

it makes debugging more difficult by breaking the natural cascading in the stylesheet.

29
Q

What does the transform property do?

A

it lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. (change how the element is visually represented)

30
Q

Give four examples of CSS transform functions.

A

matrix, perspective, rotate, translate

31
Q

The transition property is shorthand for which four CSS properties?

A

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

32
Q

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

A

height, width, https://developer.mozilla.org/en-US/docs/Web/CSS/@media

MIN-WIDTH AND MAX-WIDTH (USUALLY BE USING)

33
Q

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

A

attribute name with value of viewport

34
Q

What is a breakpoint in responsive Web design?

A

the point in which an @media rule set needs to be used
At the point the media query (@media rule) is introduced.
at the point where the styling is changed.

35
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 is more responsive for different types of viewports because it is measure in relations to its parent element

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

because it is written after. Source order