CSS

Question 1

What are the four components of “the Cascade”.

Answer 1

Source order, inheritance, specificity, and !Important

Question 2

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

Answer 2

The order that your CSS rules are written in your stylesheet

Question 3

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

Answer 3

Inheritance

Question 4

List the three selector types in order of increasing specificity.

Answer 4

Type, class, ID

Question 5

Why is using !important considered bad practice?

Answer 5

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

Question 6

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

Answer 6

css rule set, css selector, css declaration, properties, values

Question 7

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

Answer 7

.class

Question 8

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

Answer 8

with the element tag

Question 9

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

Answer 9

id

Question 10

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

Answer 10

rgb, hex codes, color names

Question 11

What CSS properties make up the box model?

Answer 11

margin border padding content

Question 12

Which CSS property pushes boxes away from each other?

Answer 12

margin

Question 13

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

Answer 13

padding

Question 14

What is a pseudo-class?

Answer 14

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button’s color when the user’s pointer hovers over it.

Question 15

What are CSS pseudo-classes useful for?

Answer 15

adding additional styling and interactivity

Question 16

Name at least two units of type size in CSS.

Answer 16

px, rem, em

Question 17

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

Answer 17

font-family

Question 18

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

Answer 18

row

Question 19

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

Answer 19

no-wrap

Question 20

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

Answer 20

row

Question 21

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

Answer 21

because they’re block level elements

Question 22

What does the transform property do?

Answer 22

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Question 23

Give four examples of CSS transform functions.

Answer 23

translate, scale, rotate, skew

Question 24

The transition property is shorthand for what four CSS properties?

Answer 24

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

Question 25

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

Answer 25

width, height, device width, aspect ratio

Question 26

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

Answer 26

viewport

Question 27

What is a breakpoint in responsive Web design?

Answer 27

a point at which the content is adjusted for some metric

Question 28

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 28

so you don’t have to change the px width on multiple break points

Question 29

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 29

because they come after the other styles in the cascade