CSS

Question 1

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

Answer 1

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.

Question 2

What are some properties inherited by child elements automatically?

Answer 2

Font color, font family

Question 3

What are some properties not inherited by child elements automatically?

Answer 3

Background-color, border properties

Question 4

How do you force inheritance onto a child element?

Answer 4

Use inherit as the value of a property.

Question 5

Why use external style sheets?

Answer 5

All pages can share the same style sheet.

Easier editing.

Question 6

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

Answer 6

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.

Question 7

How does CSS treat each HTML element?

Answer 7

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

Question 8

What do selectors allow you to do?

Answer 8

Target your rules at different elements.

Question 9

What are the two parts of a declaration?

Answer 9

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

Question 10

Where do CSS rules generally appear?

Answer 10

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

Question 11

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

Answer 11

RGB values
HEX codes
Color names
HSLA

Question 12

What is a grouped selector?

Answer 12

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

Question 13

What CSS properties make up the box model?

Answer 13

Content
Border
Margin
Padding

Question 14

What CSS property pushes boxes away from each other?

Answer 14

Margin

Question 15

Which CSS property add spaces between a box’s content and its border?

Answer 15

Padding

Question 16

How does the overflow property work?

Answer 16

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.

Question 17

What is a pseudo-class?

Answer 17

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

Question 18

What are CSS pseudo-classes useful for?

Answer 18

Changing the appearance of elements under special circumstances

Question 19

What does :hover do?

Answer 19

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

Question 20

What does :active do?

Answer 20

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

Question 21

What does :nth-child() do?

Answer 21

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

Question 22

What does :nth-child() do?

Answer 22

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

Question 23

Name some units of type size in CSS

Answer 23

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

Question 24

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

Answer 24

font-family:

Question 25

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

Answer 25

Row

Question 26

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

Answer 26

No-wrap

Question 27

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

Answer 27

Because they are block elements

Question 28

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

Answer 28

row

Question 29

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

Answer 29

Position: Static

Question 30

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

Answer 30

It does not affect the FLOW of the element

Question 31

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

Answer 31

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

Question 32

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

Answer 32

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

Question 33

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

Answer 33

It appears over the non static parent that it encounters.

Question 34

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

Answer 34

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

Question 35

What are the four box offset properties?

Answer 35

top, right, bottom, left

Question 36

How does fixed position work?

Answer 36

It positions the element in relation to the browser window.

Question 37

What are the four components of "the Cascade"?

Answer 37

Source Order Inheritance Specificity !important

Question 38

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

Answer 38

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

Question 39

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

Answer 39

Inheritance

Question 40

List the three selector types in order of increasing specificity.

Answer 40

Element type selectors Class selectors ID selectors

Question 41

Why is using !important considered bad practice?

Answer 41

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

Question 42

What does the transform property do?

Answer 42

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

Question 43

Give four examples of CSS transform functions.

Answer 43

translate rotate scale skew

Question 44

The transition property is shorthand for which four css properties?

Answer 44

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

Question 45

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

Answer 45

width height look at documentation for full list.

Question 46

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

Answer 46

viewport meta element

Question 47

What is a breakpoint in responsive web design?

Answer 47

The points at which a media query is introduced.

Question 48

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 48

Percentages scale while pixels will always stay the same size.

Question 49

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?

Answer 49

Source order

Question 50

What is JSON?

Answer 50

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

Question 51

What are serialization and deserialization?

Answer 51

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.

Question 52

Why are serialization and deserialization useful?

Answer 52

Send data over a network or store it in memory.

Question 53

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

Answer 53

stringify()

Question 54

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

Answer 54

JSON.parse()

Question 55

How do you store data in localStorage?

Answer 55

localStorage.setItem()

Question 56

How do you retrieve data from localStorage?

Answer 56

localStorage.getItem()

Question 57

What data type can localStorage save in the browser?

Answer 57

strings

Question 58

When does the 'beforeunload' event fire on the window object?

Answer 58

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