CSS Flashcards

1
Q

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

A
  1. Selectors

2. declarations

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 the period symbol followed by the name of the class element you want selected

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

by matching the elements 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

using a hash symbol followed by the name of the 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
  1. RGB Values
  2. Hex Codes
  3. 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
  1. content
  2. border
  3. margin
  4. padding
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
  • class applied by the browser that is only applied in certain circumstances
  • a keyword added to a selector that specifies a special state of the selected elements
  • let you apply a style to an element not only in relation to the content of the doc tree but also in relation to external factors like history of the navigator (:vistor), status of its content (:checked) or the position of the mouse (:hover)
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
  1. allow you to write less code
  2. style an element when user moves over it
  3. style visited and unvisited links differently
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
  1. pixels
  2. em/rem
  3. percentages
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

because divs are block elements and take up the width of the full line.

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 - left to right

17
Q

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

A

static

18
Q

What are the four box offset properties?

A

top, bottom, left, right

19
Q

What does the transform property do?

A

CSS property that lets you rotate, scale, skew, or translate an element

20
Q

Give four examples of CSS transform functions

A

rotate ( )
translate ( )
scale ( )
skew ( )

21
Q

The transition property is shorthand for which four CSS properties?

A

transition-delay
transition-duration
transition-property
transition-timing-function

22
Q

What are the four components of “the cascade”?

A

source order
inheritance
Specificity
!important

23
Q

What does the term ‘source order’ mean with respect to CSS?

A
  • the order that your CSS rules are written in your stylesheet
  • styling for an element last in your stylesheet is the styling that will ultimately take effect
24
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

25
Q

List the three selector types in order of increasing specificity

A
  1. type selectors
  2. class selectors
  3. ID selectors
26
Q

Why is using !important considered bad practice?

A

makes debugging difficult by breaking the natural cascading in your stylesheets

27
Q

What is a breakpoint in responsive Web Design?

A

the points at which a media query is introduced to change the design to a better one for the space you have available.

28
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

allows elements on your page page to change relative to their parents based on the size of the screen they are being viewed on

29
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

css-cascade source order

30
Q

What is a breakpoint in responsive Web Design?

A

the points at which a media query is introduced to change the design to a better one for the space you have available

31
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

allows elements on your page to change relative to their parents based on the size of the screen they are being viewed on

32
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

css-cascade source order