Brainscape's Knowledge GenomeTM

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


See full index

LearningFuze > CSS > Flashcards

CSS Flashcards

1
Q

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

A

selector & declaration (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

.classname { }

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

A

elementname { }

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

idname { }

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

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

A

RGB values, hex codes, color names

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

What is a pseudo-class?

A

a keyword added to a selector that specifies a special state of the element

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

What are CSS pseudo-classes useful for?

A

makes it easier to apply styling without having to add additional classes

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

Name at least two units of type size in CSS.

A

pixels, percentages, ems

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

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

A

they are block-level elements that take up the entire width of the container

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

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

A

static

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

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

A

does not affect document flow

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

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

A

no change, but can use box offset properties to move element; neighboring elements will not be affected

20
Q

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

A

takes element out of document flow

21
Q

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

A

must use box offset properties to specify where the element should appear in relation to the non-static container

22
Q

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

A

set parent to position: relative

23
Q

What are the four box offset properties?

A

top, bottom, left, right

24
Q

What are the four components of “the Cascade”.

A

source order, inheritance, specificity, !important

25
Q

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

A

the order that CSS rules are written in the stylesheet

26
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 - can occur if no CSS for that property is directly declared for the children

27
Q

The transition property is shorthand for which four CSS properties?

A

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

28
Q

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

A

min-width; max-width

29
Q

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

A

viewport

30
Q

What is the event.target?

A

a reference to the object onto which the event was dispatched

31
Q

Why is it possible to listen for events on one element that actually happen its descendent elements?

A

event flow (event bubbling)

32
Q

What DOM element property tells you what type of element it is?

A

tagName

33
Q

What does the element.closest( ) method take as its argument and what does it return?

A

takes a CSS selector string, returns itself or the closest parent node that matches the selector

34
Q

How can you remove an element from the DOM?

A

ChildNode.remove( )

35
Q

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

A

add an event listener to the parent element, then check event.target to determine the actual clicked node

36
Q

What is a breakpoint in responsive Web design?

A

the point at which a media query is introduced, usually selected to be the size where the content starts to break in some way

37
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

so you don’t need to know the exact pixel count of the screen

38
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 - if two rules are declared for the same thing, the bottom one will always be used

39
Q

What is JSON?

A

a standard text-based format for representing structured data based on JavaScript object syntax

40
Q

What are serialization and deserialization?

A

serialization is converting a native object to a string so it can be transmitted across the network, and deserialization is converting a string to a native object

41
Q

Why are serialization and deserialization useful?

A

so you can transmit data across a network

42
Q

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

A

JSON.stringify( )

43
Q

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

A

JSON.parse( )

44
Q

How do you store data in localStorage?

A

localStorage.setItem( keyName, keyValue)

45
Q

How do you retrieve data from localStorage?

A

localStorage.getItem( keyName )

46
Q

What data type can localStorage save in the browser?

A

string

47
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

LearningFuze (11 decks)

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