CSS Flashcards

1
Q

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

A

Position: static

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

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

A

It has no effect.

Relative positioning moves an element in relation to where it would have been in normal flow.

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

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

A

Has no effect on where it appears on the page

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

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

A

It is completely removed. It is no longer part of normal document flow.

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

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

A

An element set to position absolute will sit at the top-left corner of the parent element with the position that is non-static.

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

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

A

Set a value on an element (the parent) that is non-static.

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

When should you use absolute positioning?

A

When you need to layer things on top of others.

Ex. the meme exercise with the text and emoji layer

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

How do you read the CSS Ruleset:

.pokemon > img {}?

A

New css ruleset with the selector of an image element which is a direct child of an element with the class pokemon

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

How do you read the CSS ruleset:

border: 1px solid; ?

A

border SHORT HAND property with a value 1px and solid.

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

how do you read the CSS ruleset:

font-family: roboto, sans-serif

A

font-family property with the value roboto with a fallback value sans-serif

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

What are the four components of “the Cascade”.

A
  1. Source Order
  2. Inheritance
  3. Specificity
  4. !important
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.

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

Why is using !important considered bad practice?

A

It overrides the cascade.

Understanding and effectively using specificity and the cascade can remove any need for the !important flag.

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

List the three selector types in order of increasing specificity.

A
  1. ID selector
  2. CLASS selector
  3. Element selector
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
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

It is possible because of inheritance.
When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element.

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

What does the transform property do?

A

The transform CSS property lets you rotate, scale, skew, or translate an element. By modifying coordinate space.

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

Give four examples of CSS transform functions.

A
  1. Matrix
  2. Translate
  3. Scale
  4. Rotate
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

The transition property is shorthand for which four CSS properties?

A

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

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

What event is fired when a user places their cursor in a form control?

A

focus event

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

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

A

blur event

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

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

A

input event

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

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

A

submit event

23
Q

What does the event.preventDefault() method do?

A

It prevents the browser from automatically reloading the page with the form’s values in the URL.
It prevents the default action of the browser.

24
Q

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

A

elements
elements collection property
ex. document.forms[index].elements[index] or dot notation

25
Q

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

A

value property on the form control elements

ex. contactForm.elements.message.value <===

26
Q

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

A

It will be harder to find the bug

27
Q

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

A

It will be easier to prevent bugs since you are seeing what your code is doing as you are writing it

28
Q

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

A

It just reloads the page.

Every time you use a ‘submit’, ALWAYS use a preventDefault() method on the event object.

29
Q

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

A

No, the element does not get added until you use the appendChild method

30
Q

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

A

Use the the appendChild method

31
Q

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

A

Two strings.

  1. A string specifying the name of the attribute whose value is to be set (ex. class)
  2. A string containing the value to assign to the attribute
32
Q

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

A

Step 1: Create the element (createElement)
Step 2: Give it content (setAttribute or TextContent)
Step 3: Add it to the DOM (appendChild)

33
Q

What is the textContent property of an element object for?

A

The textContent property represents the text content of the node and allows us to change the text content with the assignment operator

34
Q

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

A
  1. Use the setAttribute method

2. use the className property

35
Q

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

A
  1. The function is able to make a web page automatically

2. Saves time and money

36
Q

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

A
  1. min-width

2. max-width

37
Q

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

A

Viewport meta tag

38
Q

What is the event.target?

A

It is a reference to the object onto which the event was dispatched.

39
Q

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

A

Because the closest() method allows us to specify which children we would like to watch for

40
Q

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

A

event.target.tagName

41
Q

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

A

It takes in a selectors

Returns the closest ancestor element of itself, which matches the selectors

42
Q

How can you remove an element from the DOM?

A

By using the remove method on the object for the dom element we want to remove.
Element.remove()

43
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 it to the parent

44
Q

What is the event.target?

A

It is a reference to the object onto which the event was dispatched

45
Q

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

A

It turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist).
All descendant elements also have their display turned off.

46
Q

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

A
The matches() method of the element tests whether the element would be selected by the specified CSS selector.
The return is a boolean
47
Q

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

A

By using the getAttribute() method
The argument is a string of the attribute name
Element.getAttribute()

48
Q

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

A

Start logging things to the console from the beginning

49
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

Add an event listener for each individual tab.

This code is not scaleable

50
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

By using a long list of if statement with a counter. Similar to the typing tutor challenge.
This code is not scaleable.

51
Q

What is a breakpoint in responsive Web design?

A

Breakpoints were incorporated in responsive Web design to change the layout of the webpage at a specific point (breakpoint) in order to cater for the dimensions of every device.

52
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

They are more flexible when creating a responsive layout because they are relative units.
For example, making something 50% wide means it will always take half of the screen. On the other hand, pixels will remain static (static units)

53
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

54
Q

Where should media queries be in your CSS?

A

At the very bottom