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

Question 3

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

Answer 3

Use the element name

Question 4

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

Answer 4

id

Question 5

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

Answer 5

RGB Values: rgb(102,205,170)
Hex Codes: #66cdaa
Color Names: MediumAquaMarine

Question 6

What CSS properties make up the box model?

Answer 6

Border, margin, padding

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 is a pseudo-class?

Answer 9

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

Question 11

Name at least two units of type size in CSS.

Answer 11

Pixels, percentages, ems

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?

Answer 13

Row (inline, x-axis)

Question 14

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

Answer 14

No wrap (inline)

Question 15

What are the four components of “the Cascade”.

Answer 15

Source Order, Inheritance, !Important, Specificity

Question 16

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

Answer 16

Source order is the order that your CSS rules are written in your stylesheet. The one on the bottom has priority as long as all the types above it are the same

Question 17

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

Answer 17

Inheritance

Question 18

List the three selector types in order of increasing specificity.

Answer 18

Type selector, class selector, id selector

Question 19

Why is using !important considered bad practice?

Answer 19

It’s going to override everything else. It’s too powerful.

Question 20

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

Answer 20

Because they are block elements

Question 21

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

Answer 21

Row

Question 22

What are the four components of “the Cascade”.

Answer 22

Source Order, Inheritance, !Important, Specificity

Question 23

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

Answer 23

Source order is the order that your CSS rules are written in your stylesheet. The one on the bottom has priority as long as all the types above it are the same

Question 24

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

Answer 24

Inheritance

Question 25

List the three selector types in order of increasing specificity.

Answer 25

Type selector, class selector, id selector

Question 26

Why is using !important considered bad practice?

Answer 26

It’s going to override everything else. It’s too powerful.

Question 27

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

Answer 27

Because they are block elements

Question 28

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

Answer 28

Row

Question 29

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

Answer 29

static/normal

Question 30

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

Answer 30

This does not affect the position of surrounding elements; they stay in the position they would be in normal flow.

Question 31

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

Answer 31

It does not affect where it appears but it allows you to move it.

Question 32

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

Answer 32

the box is taken out of normal flow and no longer affects the position of other elements on the page.

Question 33

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

Answer 33

This positions the element in relation to its containing element. Absolutely positioned elements move as users scroll up and down the page.

Question 34

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

Answer 34

Set containing block to non static (sticky absolute, relative, fixed)

Question 35

What are the four box offset properties?

Answer 35

Top, bottom, left, right

Question 36

What does the transform property do?

Answer 36

The transform CSS property lets you rotate, scale, skew, or translate an element

Question 37

Give four examples of CSS transform functions.

Answer 37

Rotate, skew, scale, translate

Question 38

The transition property is shorthand for which four CSS properties?

Answer 38

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

Question 39

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

Answer 39

width

display-mode

Question 40

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

Answer 40

Viewport meta tag

Question 41

What is a breakpoint in responsive Web design?

Answer 41

Breakpoints are points where the website content responds according to the device width, allowing you to show the best possible layout to the user.

Question 42

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 42

It’s more adaptable in relation to the size of the layout. Pixels are fixed and won’t change.

Question 43

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 43

Because the selector at the bottom will take priority as long as the selector names are the same. Source order.