CSS Flashcards

1
Q

[CSS Syntax]

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

[CSS Syntax]

In CSS, how do you select elements by theirclassattribute?

A

a period before the element

.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

element name

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 itsidattribute?

A

poundsign / hashtag element name

#element

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

[CSS Colocs]

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

A

Hex value, RGBA values, color name

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

margin, border, padding, content/element

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

[CSS Pseudo Classes]

What is a pseudo-class?

A

A class applied by the browser for special states or html structure

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

[CSS Pseudo Classes]

What are CSS pseudo-classes useful for?

A

For simplifying CSS and styling elements in relation to how they are interacted with

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 adjustfont-sizein CSS.

A

px, em, rem, %

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

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

Is a div a block-level element or inline?

A

Block-level element

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

[CSS Flexbox]

What is the default flex-direction of a flex container?

A

row (left to right)

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

[CSS Flexbox]

What is the default flex-wrap of a flex container?

A

no wrap (all flex items on one line)

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

What unit of size is best for sizing elements that grow and shrink?

A

rem

17
Q

[CSS Layout classes]

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

A

because they are block elements

18
Q

[CSS Layout Classes]

What is the defaultflex-directionof an element withdisplay: flex?

A

row (left to right)

19
Q

What is the purpose of a row class in an html layout?

A

sections content in vertical chunks

20
Q

What is the purpose of a column class in an html layout?

A

sections content in horizontal chunks

21
Q

What are utility classes in CSS?

A

class selectors with specific CSS properties to be easily repeated for multiple HTML elements by adding the class

22
Q

[CSS Positioning]

What is thedefaultvalue for thepositionproperty of HTML elements?

A

position: static

23
Q

[CSS Positioning]

How does settingposition: relativeon an element affect document flow?

A

everything stays the same as normal flow

24
Q

[CSS Positioning]

How does settingposition: relativeon an element affect where it appears on the page?

A

The element will be then moved based on where it was originally placed in the document flow

25
Q

[CSS Positioning]

How does settingposition: absoluteon an element affect document flow?

A

The element is taken out of the normal flow (surrounding elements will take up it’s place)

26
Q

[CSS Positioning]

How does settingposition: absoluteon an element affect where it appears on the page?

A

It appears overlapping (like photoshop layers) elements on the page within the closest NON-static positioned container

27
Q

[CSS Positioning]

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

A

Placing it inside a non-static positioned container

28
Q

[CSS Positioning]

What are the four box offset properties?

A

top, bottom, left, right

29
Q

[CSS Positioning]

What is position: fixed?

A

An element that will stay on the window; no matter how far a page is scrolled it will not move.

30
Q

[CSS Cascade]

What are the four components of the Cascade?

A

Source order
Inheritance
Specificity

31
Q

[CSS Cascade]

What does the term ‘source order’ mean with respect to CSS?

A

When all other things are equal, the lower a rule or file is declared, the stronger it is.

32
Q

[CSS Cascade]

How is it possible for the styles of an element be applied to its children as well without an additional CSS rule?

A

inheritance (as a value)

33
Q

[CSS Cascade]

List the three selector types in order of increasing specificity.

A
  1. ID selectors
  2. Class selectors
  3. Type selectors
34
Q

[CSS Cascade]

Why is using !important considered bad practice?

A

It breaks the natural cascading in stylesheets, making debugging more difficult.

35
Q

[CSS Transforms]

What does the transform property do?

A

allows for rotating, scaling, skewing or translating elements on a coordinate plane

36
Q

[CSS Transforms]

Give four examples of CSS transform functions.

A

rotate()
translate()
scale()
skew()

37
Q

[CSS Responsive Layouts]

What is a breakpoint in responsive web design?

A

It’s a condition for applying certain css rules

38
Q
[CSS Responsive Layouts]
What is the advantage of using a percentage width instead of a fixed width for a column class in responsive layout?
A

It will adjust the percentage according to the viewport size.

39
Q

[CSS Responsive Layout]
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your stylesheet, the CSS rules for the smaller min-width will ‘win’. Why is that?

A

because of source order