Brainscape's Knowledge GenomeTM

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


See full index

LFZ > CSS > Flashcards

CSS Flashcards

1
Q

If there are two or more rules that apply to the same element, which rule takes precedence?

A

Last rule= The latter if selectors are identical.

Specificity= If one selector is more specific that another.

Important = !important is considered more important that other rules.

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

What are some properties inherited by child elements automatically?

A

Font color, font family

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

What are some properties not inherited by child elements automatically?

A

Background-color, border properties

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

How do you force inheritance onto a child element?

A

Use inherit as the value of a property.

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

Why use external style sheets?

A

All pages can share the same style sheet.

Easier editing.

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

When might you use CSS in the HTML document instead of its own file?

A

If you are creating a single page with little code just to keep everything together, however it is still considered best practice to create a separate file.

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

How does CSS treat each HTML element?

A

It treats it as though each element is inside its own box.

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

What do selectors allow you to do?

A

Target your rules at different elements.

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

What are the two parts of a declaration?

A

The properties of the element you want to change, and the values of those properties.

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

Where do CSS rules generally appear?

A

CSS rules generally appear in a separate document, but sometimes may appear within the HTML page.

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

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

A

RGB values
HEX codes
Color names
HSLA

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

What is a grouped selector?

A

A grouped selector is when you have multiple selectors chosen to style.

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

What CSS properties make up the box model?

A

Content
Border
Margin
Padding

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

What 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
15
Q

Which CSS property add spaces 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
16
Q

How does the overflow property work?

A

Hidden: Hides any extra content the box cannot contain

Scroll: Adds a scrollbar to the box so users can see the rest of the content.

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

What is a pseudo-class?

A

A secondary class used to select specific attributes of an element.

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

What are CSS pseudo-classes useful for?

A

Changing the appearance of elements under special circumstances

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

What does :hover do?

A

Changes the appearance when a user hovers over something with a mouse.

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

What does :active do?

A

This changes the appearance when the user activates a button or link.

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

What does :nth-child() do?

A

Matches elements based on their position in a group of siblings.

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

What does :nth-child() do?

A

Matches elements based on their position in a group of siblings.

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

Name some units of type size in CSS

A

pixels, percentages, ems, rem, vh, vw, pts, etc

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

What CSS property controls the font used for the text inside an element?

A

font-family:

25
Q

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

A

Row

26
Q

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

A

No-wrap

27
Q

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

A

Because they are block elements

28
Q

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

A

row

29
Q

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

A

Position: Static

30
Q

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

A

It does not affect the FLOW of the element

31
Q

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

A

It will not affect the page unless you add offset values.

32
Q

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

A

The box is taken out of normal flow and no longer affects the position of other elements on the page.

33
Q

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

A

It appears over the non static parent that it encounters.

34
Q

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

A

Any non-static value parent (usually a relative positioned parent)

35
Q

What are the four box offset properties?

A

top, right, bottom, left

36
Q

How does fixed position work?

A

It positions the element in relation to the browser window.

37
Q

What are the four components of “the Cascade”?

A

Source Order
Inheritance
Specificity
!important

38
Q

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

A

The order that your CSS rules are written in your stylesheet.

39
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

40
Q

List the three selector types in order of increasing specificity.

A

Element type selectors
Class selectors
ID selectors

41
Q

Why is using !important considered bad practice?

A

It makes debugging more difficult by breaking the natural cascading in your stylesheets

42
Q

What does the transform property do?

A

The transform property lets you rotate, scale, skew, or translate an element.

43
Q

Give four examples of CSS transform functions.

A

translate
rotate
scale
skew

44
Q

The transition property is shorthand for which four css properties?

A

transition-property
transition-timing-function
transition-duration
transition-delay

45
Q

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

A

width
height
look at documentation for full list.

46
Q

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

A

viewport meta element

47
Q

What is a breakpoint in responsive web design?

A

The points at which a media query is introduced.

48
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

Percentages scale while pixels will always stay the same size.

49
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

50
Q

What is JSON?

A

It is a text-based data format following JavaScript object syntax.

51
Q

What are serialization and deserialization?

A

Serialization is converting a native object to a string so it can be transmitted across the network.

Deserialization is converting a string to a native object.

52
Q

Why are serialization and deserialization useful?

A

Send data over a network or store it in memory.

53
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

stringify()

54
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

JSON.parse()

55
Q

How do you store data in localStorage?

A

localStorage.setItem()

56
Q

How do you retrieve data from localStorage?

A

localStorage.getItem()

57
Q

What data type can localStorage save in the browser?

A

strings

58
Q

When does the ‘beforeunload’ event fire on the window object?

A

When the window, the document and its resources are about to be unloaded (closed)

LFZ (14 decks)

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