CSS Flashcards

1
Q

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

A

selector, declaration block, property, 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

Using a . followed by 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

Matches elements by node name

*|h1 = matches all h1 elements

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 # followed by id name

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

Color names
Rgb value
Hex value

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

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

A

Pixels and em

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
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
8
Q

What CSS properties make up the box model?

A

Margin, border, padding, height and width

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
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
10
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
11
Q

What is a pseudo-class?

A
keyword added to a selector that specifies a special state of the selected element
Acts like an extra value for a class attribute
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are CSS pseudo-classes useful for?

A

Helpful for the object on the page to do something

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

no-wrap

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 which will start new lines

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

17
Q

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

A

Normal flow

Position: static

18
Q

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

A

Moves element in doc flow Does not affect the position of surrounding elements

19
Q

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

A

Moves an element from the position and can shift top right left bottom of where it would have been placed

20
Q

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

A

Taken out of normal flow

21
Q

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

A

Does not affect position of any surrounding elements

Able to scroll up and down on a page

22
Q

What are the four box offset properties?

A

Top, right, bottom, left

22
Q

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

A

Fixed, set as not static

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 that your CSS rules are written in your stylesheet

The last order is applied

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

Inheritance

certain CSS properties on a child HTML element can receive value from a parent element

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 by breaking the natural cascading in your stylesheets
declaration overrides any other declarations

28
Q

What does the transform property do?

A

changes the shape, position, and orientation of page elements.

29
Q

Give four examples of CSS transform functions.

A

Rotate
Translate
Skew
matrix

30
Q

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

A

Color

aspect-ratio

31
Q

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

A

viewport