CSS

Question 1

What are the four components of “the Cascade”

Answer 1

Source order, inheritance, !important, specificity

Question 2

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

Answer 2

The lower styling code blocks take priority than those above

Question 3

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

Answer 3

By using inheritance to pass down properties to the children

Question 4

List the three selector types in order of increasing specificity.

Answer 4

class, type, id

Question 5

Why is using !important considered bad practice

Answer 5

it can messes with the natural order of cascading style sheets and debugging.

Question 6

What are the names of individual pieces of a css rule

Answer 6

declaration blocks

Question 7

How do you select elements by their class attribute

Answer 7

.class-name by using the .

Question 8

How do you select elements by their type

Answer 8

tag-name just by using their tag name although it’s not recommended

Question 9

How do you select an element by its id attribute

Answer 9

id-name by using an octothrope

Question 10

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

Answer 10

rgb, lexicon values, and names

Question 11

What CSS properties make up the box model?

Answer 11

Boxes model is a box made up of the margin, padding, and 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

They target (or select) specific states of the element and change them based on what’s in the code block

Question 15

What are CSS pseudo-classes useful for?

Answer 15

If you want to change specific areas in the css instead of the creating multiple classes, for example lists if you want to change the color of every other list item then there’s a pseudo class for that

Question 16

Name at least two units of type size in CSS

Answer 16

px or rem

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

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

Answer 20

The div takes up the entire width of the page

Question 21

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

Answer 21

row

Question 22

What does the transform property do?

Answer 22

Allows you to rotate, translate, skew the element

Question 23

Give four examples of CSS transform functions

Answer 23

translate, scale, rotate, skew

Question 24

The transition property is shorthand for which 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

the width and height feature

Question 26

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

Answer 26

the tag that contains the viewport

Question 27

What is the breakpoint in responsive Web design?

Answer 27

Creating a layout that looks good on all devices

Question 28

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

Answer 28

It measures the width of the entire page and changes according to how the page shrinks or enlarges

Question 29

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your styles sheet, the CSS rules for the smaller min-width will “win”. Why is that?

Answer 29

because of CSS cascading