CSS Flashcards

1
Q

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

A

A CSS rule contains two parts: a selector and a 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

With a full stop symbol (a.k.a. A period) then the name/value assigned to the class attribute

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

The selector matches the element’s name and is just that

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

With a # (pound, hash symbol) then the name/value assigned to the id attribute

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 Values, HEX Codes, Color Names, HSL Functional Notation

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

Margin, padding, border, and the content (content typically referred to in width & height)

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 keyword added to a selector that specifies a special state of the selected element(s) (e.g. :link, :visited, :hover,
:focus, :active)

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

They allow you to apply a style/ change the appearance of elements when a user is interacting with them.

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 (px), point (pt), percentages (%), ems (em)- equivalent to the size of a letter m)

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

The font-family property

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 is the default flex-direction

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 is the default flex-wrap; all flex items will be 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

Because the grid arranges a box or group of boxes across the page horizontally forming rows. From there, each row can then be divided into one or more columns.

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 is the default flex-direction

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

It doesn’t affect the document flow and all other elements will behave as if the relative element hasn’t moved.

19
Q

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

A

Relative positioning moves an element in relation to where it would have been in normal flow.

20
Q

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

A

Absolute elements are removed from the normal document flow (they don’t affect and aren’t affected by other elements in the page).

21
Q

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

A

The box offset properties (top or bottom and left or right) specify where the element should appear in relation to its containing element.

22
Q

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

A

Assigning the position property of the containing block/parent to anything other than ‘static’ will constrain an absolute positioned element to that containing block.

23
Q

What are the four box offset properties?

A

Top or bottom and left or right

24
Q

What are the four components of “the Cascade”.

A

Source order, inheritance, specificity, importance

25
Q

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

A

It’s the order in which CSS styling rules are written in your stylesheet and determines which style ultimately gets applied.

26
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

The value of those properties is inherited by the child element(s).

27
Q

List the three selector types in order of increasing specificity.

A

id selectors > .class selectors > element / type selectors

28
Q

Why is using !important considered bad practice?

A

This declaration overrides any other declarations and it makes debugging more difficult by breaking the natural cascading in your stylesheets.