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

Using . notation ex) .class

Question 3

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

Answer 3

Using element names ex) h1, h2

Question 4

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

Answer 4

Using #id ex) #html

Question 5

What CSS properties make up the box model?

Answer 5

Border, margin, padding

Question 6

Which CSS property pushes boxes away from each other?

Answer 6

Margin

Question 7

Margin

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

Answer 7

Padding

Question 8

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

Answer 8

Row (which goes left to right)

Question 9

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

Answer 9

Nowrap

All flex items being in one line

Question 10

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

Answer 10

Divs are block elements

And thus makes new blocks

Question 11

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

Answer 11

Row - Left to right

Question 12

What is a pseudo-class?

Answer 12

specifies a special state of the selected element(s)

Classes applied by the browser on certain conditions

Question 13

What are CSS pseudo-classes useful for?

Answer 13

Applying styling as a result of user interaction

Question 14

Name at least two units of type size in CSS.

Answer 14

Rem
Pixels
Percentages
point

Question 15

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

Answer 15

font-family

Question 16

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

Answer 16

RGB values - (values of 0-255)
How much red, green, and blue are used to make it up

Hex codes
6 digit codes that represent red, blue, green in a color preceded by a pound or hash#

Color Names
There are 147 predefined color

Question 17

What are the four components of “the Cascade”.

Answer 17

Source order, specificity, inheritance, important rule

Question 18

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

Answer 18

Whatever class is coded last within the element, that will be cascaded

Question 19

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

Answer 19

inheritance

Question 20

List the three selector types in order of increasing specificity.

Answer 20

element
class
id

Question 21

Why is using !important considered bad practice?

Answer 21

It overrides everything

Question 22

The transition property is shorthand for which four CSS properties?

Answer 22

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

Question 23

What does the transform property do?

Answer 23

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

Question 24

Give four examples of CSS transform functions.

Answer 24

Matrix
Translate
Scale
Rotate
Skew

translateY() CSS function repositions an element vertically on the 2D plane. Its result is a data type.

Question 25

What is a breakpoint in responsive Web design?

Answer 25

The breakpoint is the min-width set on the @media screen

Point where new styling change happens

Question 26

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 26

It automatically sets it for you

Question 27

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 27

Because of the source order
Media queries are at the bottom because of source order
Because it goes horizontally down.

Question 28

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

Answer 28

static: The element is positioned according to the normal flow of the document.

Question 29

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

Answer 29

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. (doesn’t affect other elements)

Question 30

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

Answer 30

This is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position, including making it overlap other elements on the page

Question 31

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

Answer 31

The element is removed from the normal document flow, and no space is created for the element in the page layout.

Question 32

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

Answer 32

It is positioned relative to its closest positioned ancestor, (nonstatic positioned ancestor)

Question 33

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

Answer 33

applying non-static position to it.
(by positioning the ancestor to relative)

If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

Question 34

What are the four box offset properties?

Answer 34

top, bottom, left, right

Question 35

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

Answer 35

width, height

Question 36

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

Answer 36

The HTML Viewport meta tag