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

starts with . followed by name

Question 3

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

Answer 3

the name of the element

Question 4

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 4

Percentages move with the width so it scales as it changes creating more visual appeal

Question 5

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

Answer 5

by # followed by name

Question 6

What CSS properties make up the box model?

Answer 6

border margin, padding, and content

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

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

Answer 9

padding

Question 10

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

Answer 10

hsl, rgb, and hex colors

Question 11

What is a pseudo-class?

Answer 11

keyword added to a selector that specifies a special state of the selected element(s)

Question 12

What are CSS pseudo-classes useful for?

Answer 12

Event based styling, (such as user interaction) focus, hover, visited,
based on position with sibling elements

Question 13

Name at least two units of type size in CSS.

Answer 13

px, , rem, (adaptive uses percentages)

Question 14

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

Answer 14

font-family

Question 15

What is the default flex-direction of a flex container

Answer 15

row

Question 16

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

Answer 16

no wrap

Question 17

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

Answer 17

they are block elements so they take up 100% of the width

Question 18

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

Answer 18

row (left to right)

Question 19

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

Answer 19

Static

Question 20

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

Answer 20

does not do anything initially

Question 21

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

Answer 21

it would remain the same

Question 22

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

Answer 22

removes it from document flow

Question 23

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

Answer 23

they position themselves within the firs non-static element.

Question 24

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

Answer 24

set an element to position relative

Question 25

What are the four box offset properties?

Answer 25

top, bottom, left, right

Question 26

What are the four components of “the Cascade”.

Answer 26

source order, inheritance, specificity, and important

Question 27

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

Answer 27

order of which you put the rules. lower rules take effect than previous ones

Question 28

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

Answer 28

inheritance

Question 29

List the three selector types in order of increasing specificity.

Answer 29

type, class, and id

Question 30

Why is using !important considered bad practice?

Answer 30

because it cannot be change, or edited after which may bring

Question 31

What does the transform property do?

Answer 31

allows adjustment of an element on a page, transforms comes after everything is rendered

Question 32

Give four examples of CSS transform functions

Answer 32

rotate, translateY, Scale, translateX, skew

Question 33

The transition property is shorthand for which four CSS properties?

Answer 33

property, duration, timing function, delay

Question 34

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

Answer 34

screen , speech, print

Question 35

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

Question 36

What is a breakpoint in responsive Web design?

Answer 36

A point where the styling may change such as hitting a certain width or such.

Question 37

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 37

it is because of source order where the most recent css takes affect