CSS Flashcards

1
Q

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

A

selector {
property: value; /* declaration */
}

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

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

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

keyword, rgb, hex code

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

margin, padding, and border

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

classes applied when a user is interacting with an element; hover, active, and 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

temporarily styling elements depending on the user’s interactions with them

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

Name two types of units that can be used to adjust font-size in CSS.

A

px, %, em (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

divs are block by default, block elements take up as much horizontal space as possible

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

Can be positioned from its default position on the page with top/bottom/left/right properties, other elements maintain their position/flow

19
Q

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

A

Does not change where it appears by default

20
Q

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

A

Removes element from flow, positions it in relation to its nearest non-static parent element by default, can be positioned with top/bottom/left/right properties, other elements shift like it’s not there

21
Q

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

A

Removes it from the document flow and positions it relative to its parent element

22
Q

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

A

Container must be positioned (not static)

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

the order rules are written in your stylesheet. The last styling for an element is applied.

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

certain CSS properties are inherited by children elements (font-family, color), and ‘inherit’ can be used as the value for many properties that aren’t inherited by default

27
Q

List the three selector types in order of increasing specificity.

A
  • element type and pseudo-elements
  • class, attribute, and pseudo-classes
  • ID
  • and combinators don’t affect specificity
28
Q

Why is using !important considered bad practice?

A

it makes debugging more difficult by breaking the natural cascading of the stylesheets

29
Q

What does the transform property do?

A

transforms elements (move it)

30
Q

Give four examples of CSS transform functions.

A

rotate, scale, skew, translate

31
Q

What is a breakpoint in responsive Web design?

A

attribute value (eg max-width: 800px) where screen will adjust depending on size of user’s screen

the point at which a media query is introduced

32
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

more adaptable to different screen sizes, elements will resize as the screen does

33
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

cascading, later rules in the stylesheet take priority

34
Q

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

A

min/max width, min/max height, orientation

35
Q

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

A

viewport