CSS Flashcards

1
Q

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

A

selector, declaration, property and 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

period before matching class name. .classname

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 tag name?

A

matches tag/element name. elementName

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

hashtag before matching id name. #idname

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 values, Hex Codes, 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

content, padding, border, margin

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

display: inline for a list (block) element?

A

removes bullets/numbers

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

What is a pseudo-class?

A

keyword added to a selector that specifies a special state of the selected element

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

allows change of appearance of elements when user is interacting with them. it allows elements to respond to users.

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

Name examples of pseudo-classes

A

:hover, :active, :focus :link :visited :nth-child()

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

What is :nth-child()?

A

matches elements based on their position among a group of siblings.

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

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

A

px, percentages, em

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

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

A

font-family to specify typeface
font-size
font-weight (bold)
font-style (italic)

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

Flexbox: display. parent or child property? What is the value for display for a flexbox.

A

parent. value: flex

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

Flexbox: order. parent or child property?

A

child

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

Flexbox. flex-direction. parent or child property? Name the values for flex-direction.

A

parent. values: row, row-reverse, column, column-reverse

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

Flexbox. flex-wrap. parent or child property? Name the values for flex-wrap.

A

parent. values: nowrap, wrap, wrap-reverse

22
Q

Flexbox. align-items. parent or child property? Name some values for align-items.

A

parent. values: stretch | flex-start | flex-end | center | baseline

23
Q

Flexbox. align-content. parent or child property? Name some values for align-content.

A

parent. values: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

24
Q

Flexbox. justify-content. parent or child property?

A

parent. values: flex-start | flex-end | center | space-between | space-around | space-evenly | start

25
Q

Flexbox. flex-basis. parent or child property?

A

child.

26
Q

Flexbox. flex-shrink. parent or child property?

A

child.

27
Q

Flexbox. align-self. parent or child property?

A

child.

28
Q

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

A

They are block elements.

29
Q

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

A

row

30
Q

What are the three primary components of a page layout? (Which helper classes do you need?)

A

container, row, column

31
Q

What is the minimum number of columns that you should put in a row?

A

1

32
Q

What is the purpose of a container?

A

to help layout an area to organize and control its children/items. to create page layouts. to create boundaries for its children.

33
Q

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

A

static (normal flow)

34
Q

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

A

It moves an element in relation to where it would’ve been normally (top, bottom, left, right)

35
Q

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

A

Document flow is unaffected. It does not affect surrounding elements; they stay in the normal flow position.

36
Q

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

A

the element is taken out of the normal flow and is ignored by the other elements. Absolutely positioned elements move as users scroll up and down the page.

37
Q

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

A

it is positioned against its first non-static parent container.

38
Q

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

A

assign a non-static position (usually relative) to the containing block.

39
Q

What are the four box offset properties?

A

top, bottom, left, right

40
Q

What are the four components of “the Cascade”.

A

source order, inheritance, specificity, !important

41
Q

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

A

order that your CSS rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.

42
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

inheritance

43
Q

List the three selector types in order of increasing specificity.

A

Type, Class, ID

44
Q

Why is using !important considered bad practice?

A

It means that your cascade is written incorrectly. It reverses the order of cascade stylesheets.

45
Q

What does the transform property do?

A

The transform CSS property lets you rotate, scale, skew, or translate an element.

46
Q

Give four examples of CSS transform functions.

A

rotate, scale, skew, translate

47
Q

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

A

width (width of viewport including width of scrollbar)
resolution (pixel density of the output device)

48
Q

What is a breakpoint in responsive Web design?

A

The point at which a media query is introduced.

49
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 scales relatively to the size of the screen and containing elements to prevent overflow, rather than staying one size.

it’s more adaptive

50
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 order