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

.class-name {

}

Question 3

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

Answer 3

type {

}

Question 4

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

Answer 4

#id-name {
}

Question 5

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

Answer 5

RGB, Hex code, color names

Question 6

What CSS properties make up the box model?

Answer 6

Border, padding, margin

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 are CSS pseudo-classes useful for?

Answer 9

Applying styling based on user actions

Question 10

What is a pseudo-class?

Answer 10

A class added to a selector to specify a special state for that element.

Question 11

Name at least two units of type size in CSS.

Answer 11

pixel, rem, em

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?

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

Answer 13

row

Question 14

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

Answer 14

no-wrap

Question 15

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

Answer 15

Because divs are block level elements

Question 16

What are the four components of “the Cascade”.

Answer 16

Source order, Inheritance, Specificity, !important

Question 17

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

Answer 17

The rule that is written last in an external stylesheet is the one that is applied.

Question 18

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

Answer 18

Inheritance, some properties are inheritable prop, ex: color, font-family

Question 19

List the three selector types in order of increasing specificity.

Answer 19

Least: Type Selector
Class Selector
Most: ID Selectors

Question 20

Why is using !important considered bad practice?

Answer 20

It disrupts the natural cascade of CSS.

Question 21

What does the transform property do?

Answer 21

Allows you to alter how an element appears in its coordinate plane.

Question 22

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

Answer 22

Width and height

Question 23

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

Answer 23

Viewport meta tag - makes the width of the website appear in the actual width of the device screen

Question 24

What is a breakpoint in responsive Web design?

Answer 24

The point where your content styling would change.

Question 25

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 25

The column will always be half the screen size, adjusting to different screen sizes. If you used hard pixels, would have to change a lot of code.

Question 26

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 26

Because of source order. The later rule will win.