CSS

Question 1

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

Answer 1

color names, or RGB, HEX, HSL, RGBA, HSLA values.

Question 2

What CSS properties make up the box model?

Answer 2

margin, border, padding, content

Question 3

Which CSS property pushes boxes away from each other?

Answer 3

The margin CSS property pushes boxes away from each other

Question 4

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

Answer 4

The CSS property that adds space between a box’s content and its border is the padding property

Question 5

What is a pseudo-class?

Answer 5

A pseudo-class is used to define a special state of an element.

it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

Question 6

What are pseudo-classes useful for?

Answer 6

A pseudo-class is used to define a special state of an element.

it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

Question 7

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

Answer 7

pixels, em, percentages

Question 8

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

Answer 8

The CSS property that controls the font used for the text inside an element is the font-family property

Question 9

What is the default flex-direction of a flex container

Answer 9

The default flex-direction of a flex container is left to right, in a row

Question 10

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

Answer 10

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

Question 11

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

Answer 11

Two div elements vertically stack on one another by default because div elements are block elements

Question 12

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

Answer 12

The default flex-direction of an element with display: flex is from left to right, in a row

Question 13

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

Answer 13

The default position property for HTML elements is static

Question 14

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

Question 15

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

Question 16

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

Question 17

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

Question 18

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

Question 19

what are the four box offset properties?

Question 20

What are the four components of the Cascade?

Answer 20

Specificity, inheritance, source order

Question 21

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

Question 22

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

Answer 22

It’s possible for (some of) the styles of an element to be applied to its children without an additional CSS rule because of the concept of inheritance

Question 23

List three selector types in order of increasing specificity

Answer 23

universal
element selector
class selector
element class selector
ID selector

Question 24

Why is using !important considered bad practice?

Question 25

What does the transform property do?

Answer 25

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Question 26

Give four examples of CSS transform functions

Answer 26

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Question 27

The transition property is shorthand for which four CSS properties?

Answer 27

transition:
transition-delay
transition-duration
transition-property
transition-timing-function

Question 28

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

Answer 28

min-width, max-width, orientation

Question 29

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

Answer 29

The viewport meta tag

Question 30

What is the breakpoint in responsive web design?

Answer 30

The breakpoint in responsive web design is the point where you want your design to adapt to the display size

It’s a point where you want your design to adapt to a specific media feature: @media only screen and (min-width: breakpoint in pixels)

Typically viewport width

Question 31

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

Answer 31

Pixels are fixed and screen sizes vary

Percentages adapt and display relative to screen size

Responds to the parent container

Question 32

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 32

The CSS rule for the smaller min0width will win because it is the last bit of code in the cascading style sheet

Because of the source order