CSS Flashcards

1
Q

CSS - SYNTAX

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

A

selector, declaration blocks, property, values

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

CSS - SYNTAX

In CSS, how do you select elements by their class attribute?

A

put a period before the element

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

CSS - SYNTAX

In CSS, how do you select elements by their type?

A

just the element

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

CSS - SYNTAX

In CSS, how do you select an element by its id attribute?

A

put a # before the element name

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

CSS-COLORS

Name three different types of values you can use to specify colors in CSS.

A
  • the name of the color
  • # FFFFFF;
  • rbg(0,0,0)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

CSS-BOX-MODEL

What CSS properties make up the box model?

A

padding, border, margin

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

CSS-BOX-MODEL

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

CSS-BOX-MODEL

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

CSS-PSEUDO-CLASS

What is a pseudo-class?

A

is a class applied by the browsers under certain circumstances

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

CSS-PSEUDO-CLASS

What are CSS pseudo-classes useful for?

A
  • a class that allows users to change the appearance when interacting with elements.
  • makes CSS easier by not having to apply certain classes to each individual element.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

CSS-FONTS

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

A

pixels and rems

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

CSS-FONTS

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

A

font-family property

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

CSS-FLEXBOX

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

CSS-FLEXBOX

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

CSS-LAYOUT-CLASSES

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

A

because they are block elements

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

CSS-LAYOUT-CLASSES

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

17
Q

CSS-LAYOUT-CLASSES

What should containers classes alway have?

A

max-width: px

margin: 0 auto

18
Q

CSS-LAYOUT-CLASSES

What should row classes alway have?

A

display: flex

19
Q

CSS-POSITIONING

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

20
Q

CSS-POSITIONING

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

21
Q

CSS-POSITIONING

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

A

only use if you want to move things slightly to the left, right, down or up

22
Q

CSS-POSITIONING

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

A

sticks to the closest ancestry that is non-static

23
Q

CSS-POSITIONING

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

A

change the ancestor element, parent div has to be other than static

24
Q

CSS-POSITIONING

What are the four box offset properties?

A

top, bottom, left, right

25
CSS-CASCADE What are the four components of "the Cascade".
Source order, specificity, importance, inheritance
26
CSS-CASCADE What does the term "source order" mean with respect to CSS?
order that css uses in order, ruleset that is lower on the ccs page is used
27
CSS-CASCADE How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
apply it to the parent element (inheritance)
28
CSS-CASCADE List the three selector types in order of increasing specificity.
id > class > element
29
CSS-CASCADE Why is using !important considered bad practice?
makes debugging harder by breaking the order of things
30
CSS-TRANSFORMS What does the transform property do?
lets you rotate, scale, skew, or translate an element
31
CSS-TRANSFORMS Give four examples of CSS transform functions.
translateX, translateY, rotate, scale
32
CSS-TRANSITION The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
33
CSS-MEDIA-QUERIES Give two examples of media features that you can query in an @media rule.
min-height, min-width
34
CSS-MEDIA-QUERIES Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
35
CSS-RESPONSIVE-LAYOUT What is a breakpoint in responsive Web design?
a point in the viewport size where the layout will change
36
CSS-RESPONSIVE-LAYOUT 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?
will adapt to the viewpoint sizing
37
CSS-RESPONSIVE-LAYOUT 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?
css rulesets are loaded in top to bottom so bottom one always wins (source order)