CSS

Question 1

what are the individual pieces of a css rule?

Answer 1

css selector (element, class, id, etc), declaration block; within declaration block is property and value

Question 2

how to select elements by their class attribute?

Answer 2

.class-name {}

Question 3

how to select elements by their type?

Answer 3

element-name {}

Question 4

How to select elements by their id?

Answer 4

id-name{}

Question 5

Three different types of values to choose color in CSS

Answer 5

hexcode, rgb(), hsla, prebaked css color

Question 6

how do you link a css stylesheet to an index html?

Answer 6

link href=”location-of-stylesheet.css” rel=”stylesheet” type=”text/css”

Question 7

What is a descendant combinator selector and how do you use it?

Answer 7

selects all elements that are descendants of the first element.
parent-element “ [single space] “ child-element {}

Question 8

What is a child combinator selector and how do you use it?

Answer 8

only uses direct children of the parent element.

parent-element > child-element {}

Question 9

what css properties make up the box model?

Answer 9

margin, padding, border

Question 10

which css property pushes boxes away from each other?

Answer 10

margin

Question 11

what css property adds space between a box’s content and its border?

Answer 11

padding

Question 12

what is a pseudo class?

Answer 12

a selector that targets an element in a certain state (being hovered, active, focus)

Question 13

what are pseudo-classes useful for?

Answer 13

for selecting targets in a certain state and applying additional properties (e.g. changing the color of a button when hovered)

Question 14

2 types of units that can be used to adjust font-size

Answer 14

rem, em , px size

Question 15

what css property controls font used for text?

Answer 15

font-family

Question 16

What is a fall-back value for fonts?

Answer 16

backup font a browser typically has in case that browser or program does not have that font initially specified (typically serif/sans-serif)

Question 17

Difference between sans-serif and serif?

Answer 17

serifs are the extra little flare at the end of letters (e.g. times new roman), refer to all fonts with it , sans-serif do not have the serif (arial)

Question 18

What is the default direction of flex-box?

Answer 18

flex-direction: row

Question 19

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

Answer 19

no-wrap

Question 20

what is the difference between justify content and align items?

Answer 20

same thing along different axes

Question 21

difference between align items and align content

Answer 21

align items affects the single row that all the flex children are in, align content affects all the rows inside the larger container.

Question 22

why do two div elements vertically stack on each other?

Answer 22

because they are block level elements; their width is automatically set to 100% of the page so the next block element is automatically bumped below

Question 23

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

Answer 23

static

Question 24

How does setting position:relative on the element affect document flow

Answer 24

does not change document flow

Question 25

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

Answer 25

setting position to relative without changing any other property values does not affect where the element appears on the page

Question 26

How does setting position: absolute on a page affect document flow?

Answer 26

It is ignored by the document flow; it’s as if it’s not there

Question 27

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

Answer 27

It goes to the top left corner of the closest non-static (usually relative, absolute) element.

Question 28

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

Answer 28

set the containing block to anything but static (usually relative/absolute)

Question 29

What are the four box offset properties?

Answer 29

top bottom right left

Question 30

what are the four components of “the cascade”

Answer 30

source order, inheritance, specificity and !important

Question 31

what does the term “source order” mean with respect to css?

Answer 31

assuming the same specificity, in the case an element has been declared a value multiple times, the value last/lower down on the css style sheet is applied.

Question 32

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

Answer 32

some properties are naturally inherited from the parent/ancestor elements

Question 33

list three selector types in order of increasing specificty

Answer 33

type selector, class selector, id selector

Question 34

why is using !important considered bad practice?

Answer 34

breaks the whole “cascade” system by overriding everything, makes it extremely hard to debug; the only thing that compete with !important is another !important

Question 35

what does the transform property do

Answer 35

every css element is place in a coordinate space on the page, transform lets you adjust those coordinates

Question 36

give four examples of css transform functions

Answer 36

matrix, translate, rotate, scale, skew

Question 37

the transition property is shorthand for which four css properties?

Answer 37

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

Question 38

what is a breakpoint in responsive Web design

Answer 38

it is a certain point you want the style of your webpage to change at

Question 39

what is the advantage of using percentage instead of a fixed width for a column class in a responsive layout?

Answer 39

It makes it more adaptive in relation to its parent class, if the viewport changes or its viewed on a different device, the column class wont , for example, take up the entire screen as it would if the width were at a fixed pixel count

Question 40

if you introduce css rules for a smaller min-width after the style for a larger min-width, why would the css rules fo r the smaller min-width ‘win’?

Answer 40

because of source order - treated with the same specificity as css class selectors