CSS

Question 1

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

css-syntax

Answer 1

Selector and Declaration block (which contains a property and value).

Question 2

In CSS, how do you select an element by its id attribute? (css-syntax)

Answer 2

You use a “#” (octothorp) before the id name

Question 3

What are 3 examples of shorthand properties? (css-syntax)

Answer 3

Padding, Margin, Border.

Question 4

Name three different types of values you can use to specify colors in CSS. (css-colors)

Answer 4

Name, #code, RGB, HSL

Question 5

Which CSS property adds space between a box’s content and its border? (css-box-model)

Answer 5

Padding

Question 6

What CSS properties make up the box model? (css-box-model)

Answer 6

Padding, Margin, Border, and Content

Question 7

Which CSS property pushes boxes away from each other? (css-box-model)

Answer 7

Margin

Question 8

Which CSS property adds space between a box’s content and its border? (css-box-model)

Answer 8

Padding

Question 9

What is a pseudo-class?

css-pseudo-classes

Answer 9

A keyword added to a CSS selector that specifies a special state of the selected element(s) and adds functionality to it.

Question 10

What are CSS pseudo-classes useful for? (css-pseudo-classes)

Answer 10

They allow you to change the appearance of elements when users interact with them.

Question 11

Name at least two units of type size in CSS.

css-fonts

Answer 11

Px, rem, %, em

Question 12

What CSS property controls the font size used for the text inside an element? (css-fonts)

Answer 12

font-size

Question 13

What is the default flex-direction of a flex container? (css-flexbox)

Answer 13

Row

Question 14

What is the default flex-wrap of a flex container? (css-flexbox)

Answer 14

No wrap

Question 15

What does Align content do? (css-flexbox)

Answer 15

Aligns all the content within flexbox elements on the cross-axis.

Question 16

What does Align-items do (css-flexbox)

Answer 16

Adjusts the rows themselves on the cross -axis

Question 17

Why do two div elements “vertically stack” on one another by default? (css-layout-classes)

Answer 17

Because they are block elements.

Question 18

What is the default flex-direction of an element with display: flex? (css-layout-classes)

Answer 18

Row. (To the right).

Question 19

How do write random text-content? (css-layout-classes)

Answer 19

lorem(?).

Question 20

What are utility classes? (css-layout-classes)

Answer 20

Classes that tell you what they do in the name (ex) .column-third.

Question 21

What are semantic classes? (css-layout-classes)

Answer 21

classes that don’t tell you what they do in the name. (Ex .character)

Question 22

How does setting position: absolute on an element affect where it appears on the page? (css-positioning)

Answer 22

It is positioned to the top-left of it’s closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

Question 23

What is the default value for the position property of HTML elements? (css-positioning)

Answer 23

static

Question 24

What are the four box offset properties? (css-positioning)

Answer 24

top, bottom, left, right

Question 25

What are the four components of “the Cascade”.

css-cascade

Answer 25

Source order, inheritance, specification, and !important.

Question 26

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

css-cascade

Answer 26

Code lower in the stylesheet get priority if they are the same relevance.

Question 27

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

Answer 27

inheritance.

Question 28

List the three selector types in order of increasing specificity.
(css-cascade)

Answer 28

element, class, id.

Question 29

Why is using !important considered bad practice?

css-cascade

Answer 29

Makes it harder to debug.

Question 30

What does the transform property do?

css-transforms

Answer 30

Lets you rotate, scale, skew, or translate (etc.) an element

Question 31

Give four examples of CSS transform functions.

css-transforms

Answer 31

rotate, scale, skew, translate, matrix.

Question 32

Give two examples of media features that you can query in an @media rule.
(css-media-queries)

Answer 32

min-width, max-width

Question 33

Which HTML meta tag is used in mobile-responsive web pages?
(css-media-queries
)

Answer 33

HTML viewport meta tag.

Question 34

What is a breakpoint in responsive Web design?

css-responsive-layout

Answer 34

The point where new styling gets applied to a document.

Question 35

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?
(css-responsive-layout)

Answer 35

percentage is far more flexible.

Question 36

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?
(css-responsive-layout)

Answer 36

Source order is a huge factor.

Question 37

Where should media queries go?

css-responsive-layout

Answer 37

At the bottom of your css stylesheet