CSS

Question 1

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

Answer 1

Selector, opening curly braces for declaration block, declaration: property with its value, closing curly braces for declaration block.

Question 2

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

Answer 2

with a dot . Ex. .class

Question 3

In CSS, how do you select elements by their type?

Answer 3

with the name of the type/element

Question 4

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

Answer 4

with # Ex. #idname

Question 5

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

Answer 5

rgb, hex code, color name, hsl

Question 6

What CSS properties make up the box model?

Answer 6

width & height

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

margin

Question 8

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

Answer 8

padding

Question 9

What is a pseudo-class?

Answer 9

a keyword added to a selector that specifies a special state of the selected element(s). it’s a class applied by browser

Question 10

What are CSS pseudo-classes useful for?

Answer 10

It allows to change the appearance of element when user interacts with them :hover :focus :active

Question 11

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

Answer 11

font-size: em; px; %

Question 12

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

Answer 12

font-family

Question 13

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

Answer 13

row

Question 14

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

Answer 14

nowrap

Question 15

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

Answer 15

because div is block-level element

Question 16

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

Answer 16

row is the default. there are row-reverse, column, column-reverse as well.

Question 17

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

Answer 17

static

Question 18

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

Answer 18

it doesn’t affect, sit on same spot, normal document flow, only will affect within its position if the properties were declared

Question 19

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

Answer 19

as it would in normal flow

Question 20

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

Answer 20

it is removed from it’s surrounding element, not a normal flow

Question 21

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

Answer 21

to the relative position of the parent that is containing. near the closest parent. top of it’s nearing ancestor that is not position: static; ( will be relative, fixed)

Question 22

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

Answer 22

make sure the value is not static for the ancestor.

Question 23

What are the four box offset properties?

Answer 23

static, relative, absolute, fixed

Question 24

Four box off set properties

Answer 24

top, left, bottom, right

Question 25

when should you only use absolute position?

Answer 25

for layered of elements, when it needs to overlap another element

Question 26

when should you use position relative

Answer 26

only minor adjustments

Question 27

What are the four components of “the Cascade”.

Answer 27

Source Order, Inheritance, Specificity, & !important

Question 28

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

Answer 28

where is the rule set placed, more recent (last rule) overules the previous rule. rule set that is lower is higher than others

Question 29

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

Answer 29

inheritance

Question 30

List the three selector types in order of increasing specificity.

Answer 30

type, class, id

Question 31

Why is using !important considered bad practice?

Answer 31

reverse cascade and override all rules even from external libraries like Bootstrap, normalize.css, third party scripts.

Question 32

What does the transform property do?

Answer 32

lets you use other functions to rotate, scale, skew, or translate an element, by modifiying the coordinate space

Question 33

Give four examples of CSS transform functions.

Answer 33

matrix, translate, rotate, translateY, scale

Question 34

The transition property is shorthand for which four CSS properties?

Answer 34

transition-property, transition-duration, transition-timeing-function, transition-delay,

Question 35

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

Answer 35

min-width, max-width

Question 36

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

Answer 36

viewport

Question 37

What is a breakpoint in responsive Web design?

Answer 37

point at which a media query is introduced.

media query needs to be introduced where the content starts to break in some way.

Question 38

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 38

it will only take the 50% of width no matter the size, but px will be in fixed size. therefore, will have to create more media query for all the fixed sizing values.

Question 39

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 39

CSS Source order picks whatever is last(latest) in document