CSS Flashcards

1
Q

What are the names of the individual pieces of CSS rules

A

Selector and declaration

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

.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 type?

A

Using 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 elements by its id attribute?

A

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, 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

Border, margin, 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
** class applied by the browser 
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
10
Q

What are CSS pseudo-classes useful for?

A

Useful to style elements based of their state alone or when the user interacts with the selected element on the page

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

px, rem, em

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

They are block line elements

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 of 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

No effect on document flow

19
Q

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

A

It appears where it would in normal flow but can be positioned using box offset properties

20
Q

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

A

It acts as if that element doesn’t exist and continues its normal flow without including that element

21
Q

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

A

It will place it in the nearest non-static parent and positions itself there; if they can’t find themselves a non-static parent, they will position themselves in the viewport or html

22
Q

How do you do train a n absolutely positioned element to a containing block?

A

Set it’s containing elements display to something other than static; needs to be non-static element

23
Q

What are the four components of “the Cascade”.

A

source order, inheritance, specificity, !important

24
Q

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

A

the order your CSS rules are written in your stylesheet; the lower it is in the stylesheet, the stronger it is in the stylesheet

25
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

when no value on an inherited property is specified then it will inherit its parent’s property

normally only applies to text related stuff; direct styling on an element overrides inheritance

26
Q

List the three selector types in order of increasing specificity.

A

type, class, id

27
Q

Why is using !important considered bad practice?

A

makes debugging more difficult because it breaks the natural cascading of the document; don’t use it

28
Q

The transition property is shorthand for which four CSS properties?

A

transition-property, transition-duration, transition-timing-function, and transition-delay.

29
Q

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

A

min-width (most common)
max-width (most common)
aspect ratio
height (of viewport)

30
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

viewport metatag

31
Q

What is a breakpoint in responsive Web design?

A

mark of some sort where new styling will take effect that wasn’t present on another format (often at a certain width)

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

source order takes effect in the cascade

33
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 for more flexibility