CSS Flashcards

1
Q

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

A

Selector, declaration block, properties with values

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

.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

Just-the-name{}

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

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

Rgb, hex, color names, hsl

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, Border, Padding, Content

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 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
9
Q

What is a pseudo-class?

A

A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets 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

Allow us to add more functionality on a webpage without using javascript.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus

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

Pixel, rem, em, ch

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 (horizontal direction)

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

No wrap

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

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

Does not affect the document

19
Q

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

A

It does not affect where it appears on the page UNLESS you move it

20
Q

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

A

Takes an element out of the normal document flow

21
Q

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

A

The location is based on the element’s closest non-statically positioned ancestor.

22
Q

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

A

You set a position other than static

23
Q

What are the four box offset properties?

A

Top, bottom, right, left

24
Q

What are the four components of “the Cascade”.

A

Transition, !important, animation, and normal

25
Q

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

A

The order that the rules appear on the CSS page affect which ones get applied. Items lower on the CSS page have precedence.

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

CSS inheritance

27
Q

List the three selector types in order of increasing specificity.

A

Tag, class, id

28
Q

Why is using !important considered bad practice?

A

Makes it hard for others to review your code

29
Q

Why do we log things to the console?

A

To debug

30
Q

What is a “model”?

A

A representation or blueprint

31
Q

Which “document” is being referred to in the phrase Document Object Model?

A

The whole html document

32
Q

What is the word “object” referring to in the phrase Document Object Model?

A

The objects in the html doc (including the html document itself)

33
Q

What is a DOM Tree?

A

Represenation of the html doc and shows all of the relationships between the elements
Give two examples of document methods that retrieve a single element from the DOM.

34
Q

What does the transform property do?

A

Modify the physical properties of html elements

35
Q

Give four examples of CSS transform functions.

A

Transform x, transform y, rotate, scale, skew, matrix

36
Q

The transition property is shorthand for which four CSS properties?

A

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