CSS Flashcards

1
Q

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

A

Selector, declaration, property/key, value

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

Use .classname (period before the class 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

Use the element name (h1, p, etc)

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

Use a hashtag before the id name (#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

(Width, height,) border, margin, 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 add 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 modification of a css selector which changes the appearance of elements when the user interacts with them

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

Can apply a hovering effect, can show when an element is being activated, and can show when an element has 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

Pixels, percentages, ems

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

Left to right

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 (all on one line)

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 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: flex?

A

Left to right

17
Q

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

A

Normal flow

18
Q

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

A

It only effects the positioning of the element being positioned, the rest of the flow stays normal

19
Q

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

A

It moves the element from where it would be in normal flow, shifting it to the top, right, bottom, left

20
Q

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

A

Only affects the elements being positioned, which is pulled out of the document flow, the rest of the document stays in normal flow

21
Q

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

A

It positions it to stay in an area as the user scrolls through the page

22
Q

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

A

Set the parent element to relative position

23
Q

What are the four box offset properties?

A

Top, bottom, right, left

24
Q

What is a breakpoint in responsive Web design?

A

A point or threshold in the width of a webpage in which a CSS style is applied

25
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

Percentages are always consistent, whereas fixed widths will vary

26
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

Because that breakpoint is being reached before the larger breakpoint, negating the larger one’s styling

27
Q

What are the four components of “the Cascade”.

A

Source order, inheritance, specificity, and !important

28
Q

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

A

The order in which CSS rules are written in a stylesheet, with the last rule usually being applied if two rules contain the same styling

29
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

Some CSS properties are set to inherited by default, meaning they are automatically applied to children elements

30
Q

List the three selector types in order of increasing specificity.

A

Type selectors, class selectors, id selectors

31
Q

Why is using !important considered bad practice?

A

It makes debugging more difficult because it breaks the natural cascading of the stylesheets

32
Q

What is the affect of setting an element to display: none?

A

Causes the element to not be dispalyed