Brainscape's Knowledge GenomeTM

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


See full index

Web Dev > CSS > Flashcards

CSS Flashcards

1
Q

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

A

Ruleset: selector, code 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 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 tag name?

A

tag name

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 name

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

Padding, Borders, Margins

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

Margins

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 it’s 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 that let’s you apply a style to an 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

To style an element in relation to the content and also in relation to external factors

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

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

A

pixels, em/rem

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

Row

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

Put everyone on one row

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

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

A

Because they are block elements

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

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

A

Row

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

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

A

Container, row, column

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

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

A

One

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

What is the purpose of a “container”?

A

To contain the whole layout and give a minimum weight

18
Q

What is the “default” value of the |position| property of HTML elements?

A

Static

19
Q

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

A

Flow stays the same

20
Q

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

A

It moves the element around it’s start position

21
Q

How does setting |position: absolute| affect document flow?

A

It’s taken out of the document flow

22
Q

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

A

It’s confined to it’s first non-static ancestor

23
Q

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

A

By making the block |position: relative|

24
Q

What are the four components of “the Cascaade”?

A

Source order, inheritance, specificity, importence

25
Q

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

A

Order of code written

26
Q

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

A

Inheritance

27
Q

List the three selector types in order of increasing specificity.

A

Type, class, ID

28
Q

Why is using |!important| considered bad practice?

A

It could prevent other developers with writing plug-ins or frameworks

29
Q

What is a “model”?

A

A copy of the web page made in memory

30
Q

Which “document” is being referred to in the phrase “Document Object Model”?

A

A webpage

31
Q

Which “object” is being referred to in the phrase “Document Object Model”?

A

The DOM tree

32
Q

What is a DOM Tree?

A

A model made of many objects.

33
Q

Give 2 examples of a |document| method that retrieve a single element from the DOM.

A

getElementById() / querySelector()

34
Q

Give 1 example of a |document| method that retrieve multiple elements from the DOM at once.

A

querySelectorAll()

35
Q

Why might you want to assign the return value of a DOM query to a variable?

A

If you need to work with the element more than once

36
Q

What |console| method allows you to inspect the properties of a DOM element object?

A

console.dir()

37
Q

Why would a |

| tag need to be placed at the bottom of the HTML content instead of at the top?
A

The browser needs to parse all the elements in the HTML page before the JavaScript code can access them.

38
Q

What does |document.querySelector()| take as it’s argument and what does it return?

A

Takes a selector and returns the first matching result.

39
Q

What does |document.querySelectorAll()| take as it’s argument and what does it return?

A

Takes a selector and returns all matching results into a NodeList

40
Q

What does the transform property do?

A

Modifies coordinate space of the CSS visual formatting model

41
Q

Give 4 examples of CSS transform functions.

A

Rotate, scale, skew, translate

42
Q

Give 2 examples of media features that you can query in |@media| rule

A

screen orientation, browser viewport width

Web Dev (4 decks)

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