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 individual pieces of a CSS rule?

A

selector, curly brackets, 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

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

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

id {}

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

hex, rgb, color name(keyword)

bonus points rgba, hsl, hsla

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 boes 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 adds 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

keyword that specifies a special state of the selected element
eg: button:hover{}

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

lets you apply styling to elements in relation to external factors

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

px, em, rem, pt

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 (left to right)

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

no wrap (everything on one line)

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

div elements are block elements

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 (left to right)

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

allows us to move the element relative to where it should be

does not change document flow - purely visual

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

with no other augments - it would be the same

needs top, bottom, left, right to modify

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

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

A

it is removed from the normal flow - doesn’t affect position of surroundings (used to place elements on top of other elements)

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

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

A

positions relative to the boundary of the previous parent non-statically positioned element

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

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

A

set the containing block to be a non static element (usually position: relative)

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

What are the four box offset properties?

A

top, bottom, left, right

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

What are the four components of “the Cascade”.

A

source order, inheritance, specificity, important rule

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

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

A

styling lower in the style sheet takes priority

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

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

List the three selector types in order of increasing specificity.

A

element/type > class > id

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

Why is using !important considered bad practice?

A

overrides cascade

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

What does the transform property do?

A

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

30
Q

Give four examples of CSS transform functions.

A

rotate, scale, skew, translate

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 event is fired when a user places their cursor in a form control?

A

focus

33
Q

What event is fired when a user’s cursor leaves a form control?

A

blur

34
Q

What event is fired as a user changes the value of a form control?

A

input

35
Q

What event is fired when a user clicks the “submit” button within a ?

A

submit

36
Q

What does the event.preventDefault() method do?

A

if the event does not get explicitly handled, the default action should not be taken as it normally would be
ie a default behavior of type checkbox is to be checked, preventDefault() prevents box from being checked

37
Q

What does submitting a form without event.preventDefault() do?

A

Automatically load the form values.

38
Q

What property of a form element object contains all of the form’s controls.

A

elements property

39
Q

What property of form a control object gets and sets its value?

A

value

40
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

no way to know where the code is bugged

41
Q

What is an advantage of having your console open when writing a JavaScript program?

A

immediate feedback

42
Q

Does the document.createElement() method insert a new element into the page?

A

no, it has to be appended first

43
Q

How do you add an element as a child to another element?

A

element.appendChild()

44
Q

What do you pass as the arguments to the element.setAttribute() method?

A

(‘name of the attribute’, ‘attribute value’)

45
Q

What steps do you need to take in order to insert a new element into the page?

A

1) query select element to be appended to
2) create element
3) append element

46
Q

What is the textContent property of an element object for?

A

gets the text content of the element

also allows us to set the text content of the element

47
Q

Name two ways to set the class attribute of a DOM element.

A

element.setAttribute() and className property and classList property

48
Q

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

A

reusability

49
Q

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

A

min width, max width, height, etc

50
Q

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

A

viewport

51
Q

Where should media queries go?

A

at the bottom of the css sheet to override existing defaults for web

52
Q

What is the event.target?

A

returns the object (dom element) that the event is attached to/where the event originated from

53
Q

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

A

event bubbling

54
Q

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

A

.tagName

55
Q

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

A

takes a selector and returns closest node that matches the selector

56
Q

How can you remove an element from the DOM?

A

remove() ON the element that you want to be removed

57
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

take advantage of bubbling and put event listener on the parent element

58
Q

What is the event.target?

A

the object for the element where the event originated from

59
Q

What is the affect of setting an element to display: none?

A

does not show the element on the web page

60
Q

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

A

takes a selector as an argument, returns a boolean

61
Q

How can you retrieve the value of an element’s attribute?

A

getAttribute()

62
Q

At what steps of the solution would it be helpful to log things to the console?

A

verifying element location, values of attributes

63
Q

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

A

would need to include event listeners for each individual element

64
Q

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

A

a huge if conditional code block

65
Q

What is a breakpoint in responsive Web design?

A

breakpoints determine where the styling would change (any media features)

66
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

with percentages the layout adapts to the exact dimensions of the viewport’s width.

67
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

The lower one wins due to css rules

68
Q

What is JSON

A

text-based data format

69
Q

What are serialization and deserialization?

A

how data is transformed into bytes and back

70
Q

Why are serialization and deserialization useful?

A

Allows for storage and withdrawal from storage

71
Q

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

A

JSON.stringify

72
Q

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

A

JSON.parse

Web Development (12 decks)

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