CSS

Question 1

[CSS Syntax]

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

Answer 1

selector {declaration block}

property: value;

Question 2

[CSS Syntax]

In CSS, how do you select elements by theirclassattribute?

Answer 2

a period before the element

.element

Question 3

[CSS Syntax]

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

Answer 3

element name

Question 4

[CSS Syntax]

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

Answer 4

poundsign / hashtag element name

#element

Question 5

[CSS Colocs]

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

Answer 5

Hex value, RGBA values, color name

Question 6

[CSS Box Model]

What CSS properties make up the box model?

Answer 6

margin, border, padding, content/element

Question 7

[CSS Box Model]

Which CSS property pushes boxes away from each other?

Answer 7

Margin

Question 8

[CSS Box Model]

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

Answer 8

Padding

Question 9

[CSS Pseudo Classes]

What is a pseudo-class?

Answer 9

A class applied by the browser for special states or html structure

Question 10

[CSS Pseudo Classes]

What are CSS pseudo-classes useful for?

Answer 10

For simplifying CSS and styling elements in relation to how they are interacted with

Question 11

[CSS Fonts]

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

Answer 11

px, em, rem, %

Question 12

[CSS Fonts]

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

Answer 12

font-family

Question 13

Is a div a block-level element or inline?

Answer 13

Block-level element

Question 14

[CSS Flexbox]

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

Answer 14

row (left to right)

Question 15

[CSS Flexbox]

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

Answer 15

no wrap (all flex items on one line)

Question 16

What unit of size is best for sizing elements that grow and shrink?

Answer 16

rem

Question 17

[CSS Layout classes]

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

Answer 17

because they are block elements

Question 18

[CSS Layout Classes]

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

Answer 18

row (left to right)

Question 19

What is the purpose of a row class in an html layout?

Answer 19

sections content in vertical chunks

Question 20

What is the purpose of a column class in an html layout?

Answer 20

sections content in horizontal chunks

Question 21

What are utility classes in CSS?

Answer 21

class selectors with specific CSS properties to be easily repeated for multiple HTML elements by adding the class

Question 22

[CSS Positioning]

What is thedefaultvalue for thepositionproperty of HTML elements?

Answer 22

position: static

Question 23

[CSS Positioning]

How does settingposition: relativeon an element affect document flow?

Answer 23

everything stays the same as normal flow

Question 24

[CSS Positioning]

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

Answer 24

The element will be then moved based on where it was originally placed in the document flow

Question 25

[CSS Positioning] | How does setting position: absolute on an element affect document flow?

Answer 25

The element is taken out of the normal flow (surrounding elements will take up it's place)

Question 26

[CSS Positioning] | How does setting position: absolute on an element affect where it appears on the page?

Answer 26

It appears overlapping (like photoshop layers) elements on the page within the closest NON-static positioned container

Question 27

[CSS Positioning] | How do you constrain an absolutely positioned element to a containing block?

Answer 27

Placing it inside a non-static positioned container

Question 28

[CSS Positioning] | What are the four box offset properties?

Answer 28

top, bottom, left, right

Question 29

[CSS Positioning] | What is position: fixed?

Answer 29

An element that will stay on the window; no matter how far a page is scrolled it will not move.

Question 30

[CSS Cascade] | What are the four components of the Cascade?

Answer 30

Source order Inheritance Specificity

Question 31

[CSS Cascade] | What does the term 'source order' mean with respect to CSS?

Answer 31

When all other things are equal, the lower a rule or file is declared, the stronger it is.

Question 32

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

Answer 32

inheritance (as a value)

Question 33

[CSS Cascade] | List the three selector types in order of increasing specificity.

Answer 33

1. ID selectors 2. Class selectors 3. Type selectors

Question 34

[CSS Cascade] | Why is using !important considered bad practice?

Answer 34

It breaks the natural cascading in stylesheets, making debugging more difficult.

Question 35

[CSS Transforms] | What does the transform property do?

Answer 35

allows for rotating, scaling, skewing or translating elements on a coordinate plane

Question 36

[CSS Transforms] | Give four examples of CSS transform functions.

Answer 36

rotate() translate() scale() skew()

Question 37

[CSS Responsive Layouts] | What is a breakpoint in responsive web design?

Answer 37

It's a condition for applying certain css rules

Question 38

``` [CSS Responsive Layouts] What is the advantage of using a percentage width instead of a fixed width for a column class in responsive layout? ```

Answer 38

It will adjust the percentage according to the viewport size.

Question 39

[CSS Responsive Layout] If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your stylesheet, the CSS rules for the smaller min-width will 'win'. Why is that?

Answer 39

because of source order