Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Learning Fuze > CSS > Flashcards

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

.class{}
elements.class{}

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 tag name?

A

tag{}

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

id{}

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

What is a pseudo-class?

A

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

What are CSS pseudo-classes useful for?

A

They allow to change the appearance when a user is interacting with them

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

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

A

Horizontal

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

What are all of justify-content values?

A

flex-start (items align to left)
flex-end (items align to right)
center (items align to center)
space-between (items have equal spacing)
space-around (items have spacing around them)
space-evenly (container and items spaced evenly)

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

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

A

Because they are block level elements

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

What is the default flex-direction of an element with display: flex?

A

Horizontal

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

What are the three primary components of a page layout? (Which helper classes do you need?)

A

Row
Column
Container

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

What is the minimum number of columns that you should put in a row?

A

1

18
Q

What is the purpose of a container?

A

They will hold columns and rows

19
Q

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

A

Static

20
Q

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

A

It doesn’t

21
Q

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

A

It doesn’t it’ll still be relative to where it would’ve been

22
Q

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

A

It gets removed from the document flow

23
Q

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

A

It ignores the space it would be taking up

24
Q

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

A

By setting a relative

25
Q

What are the four box offset properties?

A

Top
Right
Bottom
Left

26
Q

z-index

A

A z-index will allow you to determine how containers are stacked

27
Q

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

A

The order CSS gets applied

28
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

29
Q

Why is using !important considered bad practice?

A

It reverses the cascade order of the stylesheet

30
Q

What are the four components of “the Cascade”.

A

Source Order
Inheritance
Specificity
!importance

31
Q

What does the transform property do?

A

It lets you rotate, scale, skew, or translate an element.

32
Q

Give four examples of CSS transform functions.

A

rotate()
scale()
matrix()
translate()

33
Q

Give four examples of CSS transform functions.

A

rotate()
scale()
matrix()
translate()

34
Q

The transition property is shorthand for which four CSS properties?

A

delay
duration
timing-function
property

35
Q

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

A

screen
width

36
Q

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

A

<meta></meta>

37
Q

What is a breakpoint in responsive Web design?

A

A point where you would want the @media to be applied

38
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

Using percentages will give you a more accurate measurement

39
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

All @mediia rules have the same weight so whatever is last takes the soruce

40
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

All @mediia rules have the same weight so whatever is last takes the source order

Learning Fuze (17 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions