CSS Flashcards

1
Q

What CSS properties make up the box model?

A

Margin, Padding, border, width and height

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

Which CSS property pushes boxes away from eachother?

A

Margin

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

What 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
4
Q

What are the names of individual pieces of a css rule set?

A

Selector and Declaration Block

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

CSS selector for id attribute?

A

id

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

CSS select elements by type?

A

element

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

CSS selector for element by class?

A

.class

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

What are the three different types of values you can use to specify colors in CSS?

A

RGB, Hexadecimal and color name

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

What is a pseudo-class?

A

pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

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

Two types of units that. can be used to adjust font size in CSS

A

px, em, %

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

Default direction of a flex cotainer/ direction of an element with display: flex

A

row

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

default flex wrap of flex container

A

nowrap

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

why do two divs vertically stack on one another by default?

A

block

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

Default value for the position property of HTML elements?

A

Static

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

How does setting position: relative affect document flow?

A

moves an element in relation to where it would have been in normal flow ex left: 10px;

17
Q

how does position: absolute; affect normal flow?

A

taken out of normal flow and no longer affects other elements on a page

18
Q

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

A

set its ancestor to position relative

19
Q

what are the four box offset properties?

A

left right top bottom

20
Q

the four components of the cascade

A

source order, inheritance, specificity and !imporant

21
Q

what does the term source order mean with CSS?

A

the order from left to right of the styles applied to an element.

22
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

inherit property

23
Q

List the three selector types in order of increasing specificity.

A

*Type selectors, class selectors, ID selectors

24
Q

Why is using!importantconsidered bad practice?

A

it makes debugging more difficult by breaking the natural cascading in your stylesheets

25
Q
  • What does the transform property do?
A
  • Lets you modify the coordinate space of the css visual formatting
26
Q
  • Give four examples of CSS transform functions.
A
  • Rotate x rotate y , scale, transform.
27
Q
  • Name four transition properties
A
  • Transition, duration, timing function, delay property
28
Q

whats a breakpoint in responsive web design?

A

CSS breakpoints are the points added in the code, the website content responds to these points depending on the device screen size

29
Q
  • What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?
A

its got wiggle room on different screen sizes within the media query

30
Q
  • If you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?
A

source order