Brainscape's Knowledge GenomeTM

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


See full index

Web Development > CSS > Flashcards

CSS Flashcards

1
Q

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

A

Selector and Declaration block

Property and 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 name of the 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

Writing out the name of the element

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 the name of the 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

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(s).

Just a class.

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

Lets you apply a style of element in relation to the content as well as external factors

We use it because it’s easier to adjust and modify the code

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

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

nowrap

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

They are blocks by default

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

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

At least one

17
Q

What is the purpose of a container?

A

The boundary to contain all your elements

18
Q

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

A

Static

19
Q

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

A

It has no effect on document flow

20
Q

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

A

It is put relative to where it would normally be.

Ex. Out of body experience

21
Q

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

A

It is taken out of the normal flow and no longer affects the position of other elements

Element no longer exists

22
Q

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

A

It is bounded by the nearest non static ancestor

23
Q

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

A
24
Q

What are the four box offset properties?

A

Top, Bottom, Left, Right

25
Q

Align-items is on which axis?

A

Cross Axis

26
Q

Justify-content is on which axis?

A

Main Axis

27
Q

What are the four components of “the Cascade”.

A

Source order
Inheritance
Specificity
Important

28
Q

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

A

The order a CSS rule is written in

The style that is closer to the bottom will have more priority than the others

29
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

30
Q

Why is using !important considered bad practice?

A

It messes with the specificity of the CSS and overrides everything else

31
Q

The transition property is shorthand for which four CSS properties?

A

Transition-property
Transition-duration
Transition-timing-function
Transition-delay

32
Q

What does the transform property do?

A

Lets you rotate, scale, skew, or translate an element

33
Q

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

A

height or width

34
Q

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

A

<meta name=”viewport”

35
Q

What is a breakpoint in responsive Web design?

A

Targeting the boundary lines where content starts to break instead of aiming for specific screen sizes

36
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

Fixed means it will only change at that specific pixel while percentage will scale

37
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

Source Order

Web Development (4 decks)

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