CSS

Question 1

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

Answer 1

selector, declaration, property and value.

Question 2

In CSS, how do you select elements by their class attribute?

Answer 2

period before matching class name. .classname

Question 3

In CSS, how do you select elements by their tag name?

Answer 3

matches tag/element name. elementName

Question 4

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

Answer 4

hashtag before matching id name. #idname

Question 5

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

Answer 5

RGB values, Hex Codes, Color Names

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

display: inline for a list (block) element?

Answer 9

removes bullets/numbers

Question 10

What is a pseudo-class?

Answer 10

keyword added to a selector that specifies a special state of the selected element

Question 11

What are CSS pseudo-classes useful for?

Answer 11

allows change of appearance of elements when user is interacting with them. it allows elements to respond to users.

Question 12

Name examples of pseudo-classes

Answer 12

:hover, :active, :focus :link :visited :nth-child()

Question 13

What is :nth-child()?

Answer 13

matches elements based on their position among a group of siblings.

Question 14

Name two types of units that can be used to adjust font-size in CSS.

Answer 14

px, percentages, em

Question 15

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

Answer 15

font-family to specify typeface
font-size
font-weight (bold)
font-style (italic)

Question 16

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

Answer 16

row

Question 17

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

Answer 17

nowrap

Question 18

Flexbox: display. parent or child property? What is the value for display for a flexbox.

Answer 18

parent. value: flex

Question 19

Flexbox: order. parent or child property?

Answer 19

child

Question 20

Flexbox. flex-direction. parent or child property? Name the values for flex-direction.

Answer 20

parent. values: row, row-reverse, column, column-reverse

Question 21

Flexbox. flex-wrap. parent or child property? Name the values for flex-wrap.

Answer 21

parent. values: nowrap, wrap, wrap-reverse

Question 22

Flexbox. align-items. parent or child property? Name some values for align-items.

Answer 22

parent. values: stretch | flex-start | flex-end | center | baseline

Question 23

Flexbox. align-content. parent or child property? Name some values for align-content.

Answer 23

parent. values: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

Question 24

Flexbox. justify-content. parent or child property?

Answer 24

parent. values: flex-start | flex-end | center | space-between | space-around | space-evenly | start

Question 25

Flexbox. flex-basis. parent or child property?

Answer 25

child.

Question 26

Flexbox. flex-shrink. parent or child property?

Answer 26

child.

Question 27

Flexbox. align-self. parent or child property?

Answer 27

child.

Question 28

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

Answer 28

They are block elements.

Question 29

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

Answer 29

row

Question 30

What are the three primary components of a page layout? (Which helper classes do you need?)

Answer 30

container, row, column

Question 31

What is the minimum number of columns that you should put in a row?

Answer 31

1

Question 32

What is the purpose of a container?

Answer 32

to help layout an area to organize and control its children/items. to create page layouts. to create boundaries for its children.

Question 33

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

Answer 33

static (normal flow)

Question 34

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

Answer 34

It moves an element in relation to where it would've been normally (top, bottom, left, right)

Question 35

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

Answer 35

Document flow is unaffected. It does not affect surrounding elements; they stay in the normal flow position.

Question 36

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

Answer 36

the element is taken out of the normal flow and is ignored by the other elements. Absolutely positioned elements move as users scroll up and down the page.

Question 37

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

Answer 37

it is positioned against its first non-static parent container.

Question 38

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

Answer 38

assign a non-static position (usually relative) to the containing block.

Question 39

What are the four box offset properties?

Answer 39

top, bottom, left, right

Question 40

What are the four components of "the Cascade".

Answer 40

source order, inheritance, specificity, !important

Question 41

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

Answer 41

order that your CSS rules are written in your stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.

Question 42

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

Answer 42

inheritance

Question 43

List the three selector types in order of increasing specificity.

Answer 43

Type, Class, ID

Question 44

Why is using !important considered bad practice?

Answer 44

It means that your cascade is written incorrectly. It reverses the order of cascade stylesheets.

Question 45

What does the transform property do?

Answer 45

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

Question 46

Give four examples of CSS transform functions.

Answer 46

rotate, scale, skew, translate

Question 47

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

Answer 47

width (width of viewport including width of scrollbar) resolution (pixel density of the output device)

Question 48

What is a breakpoint in responsive Web design?

Answer 48

The point at which a media query is introduced.

Question 49

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 49

it scales relatively to the size of the screen and containing elements to prevent overflow, rather than staying one size. it's more adaptive

Question 50

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 50

Cascading order