CSS

Question 1

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

Answer 1

Ruleset | Declaration block
selector {
	declaration;
	property: value;
}

Question 2

In CSS, how do you select elements by theirclassattribute?

Answer 2

.class { }

Question 3

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

Answer 3

element { }

Question 4

In CSS, how do you select an element by itsidattribute?

Answer 4

id { }

Question 5

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

Answer 5

RGB values - rgb(100,100,90) - express colors in terms of how much red, green, and blue are used to make up it up, 0 - 255
Hex codes - #ee3e80 - six-digit codes that represent the amount of red, green, and blue in a color, preceded by a #
Color names - 147 predefined color names that are recognized by the browser
RGBA, HSL, HSLA

Question 6

What CSS properties make up the box model?

Answer 6

Content, padding, border, 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 is a pseudo-class?

Answer 9

A keyword added to a selector that specifies a special state of the selected elements
Pseudo classes are applied by browsers, not written by developers
:hover, :active, :focus, :visited, :checked

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Lets you apply a style to an element not only in relation to the content of the document tree, but also in relation to eternal factors like that history of the navigator (:visited), the status of its content (:checked), or the position of the mouse (:hover)

Question 11

Name two types of units that can be used to adjustfont-sizein CSS.

Answer 11

Pixels - very precise control over how much space their text takes up Percentages - default size of text in browsers is 16px
Ems - is equivalent to the width of a letter m
Rems - based on root 16px

Question 12

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

Answer 12

font-family

Question 13

What is the defaultflex-directionof aflexcontainer?

Answer 13

flex-direction: row

Question 14

What is the defaultflex-wrapof aflexcontainer?

Answer 14

flex-wrap: nowrap

Question 15

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

Answer 15

div elements are block-level element

Question 16

What is the defaultflex-directionof an element withdisplay: flex?

Answer 16

row

Question 17

What is thedefaultvalue for thepositionproperty of HTML elements?

Answer 17

position: static

Question 18

How does settingposition: relativeon an element affect document flow?

Answer 18

Does not affect the position of surrounding elements; they stay in the position they would be in normal flow

Question 19

How does settingposition: relativeon an element affect where it appears on the page?

Answer 19

Relative positioning moves an element in relation to where it would have been in normal flow

Question 20

How does settingposition: absoluteon an element affect document flow?

Answer 20

It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up. Positions elements in relation to its containing element.

Question 21

How does settingposition: absoluteon an element affect where it appears on the page?

Answer 21

Absolutely positioned elements sits at the top left corner of the nearest ancestor element with position property value set to non static values

Question 22

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

Answer 22

Set containing block (ancestor element) to position property: relative
Relative has least amount of repercussion to document flow

Question 23

What are the four box offset properties?

Answer 23

top, bottom, left, right

Question 24

What are the four components of “the Cascade”.

Answer 24

Source order, specificity, inheritance, importance

Question 25

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

Answer 25

When the specificity weight of the rules is the same, then ruleset that comes last in the CSS will win.

Question 26

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

Answer 26

Inheritance

Question 27

List the three selector types in order of increasing specificity.

Answer 27

Element, Class, ID

Question 28

Why is using !important considered bad practice?

Answer 28

Overrides cascade

Question 29

What does the transform property do?

Answer 29

Lets you rotate, scale, skew, or translate and element, modifies the coordinate space of the CSS visual formatting model

Question 30

Give four examples of CSS transform functions.

Answer 30

``` translate(length-percentage values) rotate(angle) scale() skew() matrix() ```

Question 31

The transition property is shorthand for which four CSS properties?

Answer 31

Transition-delay Transition-duration Transition-property Transition-timing-function

Question 32

What is a breakpoint in responsive Web design?

Answer 32

The points at which a media query is introduced

Question 33

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 33

Percentages will give wiggle room vs fixed width will remain at specified width regardless of the size of the browser

Question 34

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 34

Source order *Media queries should be at the bottom of the same file as original rule