CSS

Question 1

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

Answer 1

selector, declaration block, property, value

Question 2

In CSS, how do you select elements by their class attribute?

Answer 2

.

Question 3

In CSS, how do you select elements by their tag name?

Answer 3

just the name of the element 4head

Question 4

In CSS, how do you select an element by its id attribute?

Answer 4

#

Question 5

What is a pseudo-class?

Answer 5

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Question 6

What are CSS pseudo-classes useful for?

Answer 6

used to add styles to selectors, but only when those selectors meet certain conditions. A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed by a pseudo-class such as “hover”, “focus”, or “active”, like this: a:hover { /* your style here */ }

Question 7

Name two types of units that can be used to adjust font-size in CSS.

Question 8

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

Answer 8

font-family

Question 9

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

Answer 9

they’re block elements

Question 10

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

Answer 10

row

Question 11

What are the three primary components of a page layout? (Which helper classes do you need?)

Answer 11

visual heirarchy, visual flow, grouping/alignment

Question 12

What is the minimum number of columns that you should put in a row?

Answer 12

1

Question 13

What is the purpose of a container?

Answer 13

easier to organize shiet

Question 14

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

Answer 14

move relative to where it normally would exist if it was static

Question 15

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

Answer 15

it has no affect on document flow

Question 16

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

Answer 16

it don’t

Question 17

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

Answer 17

it goes to first non static ancestor

Question 18

What are the four box offset properties?

Question 19

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

Answer 19

removed from document entirely, so it yolos. goes to nearest layer positioned

Question 20

What are the four components of “the Cascade”.

Answer 20

order inheritance specificity !important

Question 21

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

Answer 21

whatevers on bottom of stylesheet reigns supreme

Question 22

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

Answer 22

if its an inheritable rule

Question 23

List the three selector types in order of increasing specificity.

Answer 23

no value -> type -> class/id

Question 24

Why is using !important considered bad practice?

Answer 24

its lame and theres not really a way to future proof help u

Question 25

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

Answer 25

min-width and orientation

min-width is prob the one you use most often

the standard for design nowadays is “mobile first”
-what’s easier? moving from a large house to small house, or small house to large house?
–if you design for small first then making bigger is easier
–usually smallest you start at is 320 px

Question 26

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

Answer 26

viewport meta

Question 27

What is the event.target?

Answer 27

the element where the event originated from

Question 28

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

Answer 28

bubbling

Question 29

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

Answer 29

tagName property - ALL UPPERCASE ALL THE TIME FOREVER

why? html was originally in all uppercase… its a relic

Question 30

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

Answer 30

takes the string of a css selector, returns the closest parent to the selector, or null if nothing is found.

Closest is the opposite of querySelector.

Question 31

How can you remove an element from the DOM?

Answer 31

element.remove

Question 32

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?

Question 33

What is a breakpoint in responsive Web design?

Answer 33

the point at which media queries are introduced

Question 34

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?

Answer 34

so it works on all screen sizes

Question 35

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?