CSS

Question 1

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

Answer 1

property, value, declaration block, selector

Question 2

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

Answer 2

you would use the dot and the classname

Question 3

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

Answer 3

you would just type the element name

Question 4

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

Answer 4

you would use the hashtag and then the class name

Question 5

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

Answer 5

hex code
color name
rgb

Question 6

What CSS properties make up the box model?

Answer 6

border
margin
padding

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 pseudo class is a class that allows you to chnage the appearance of a element when the user interacts with it

Question 10

What are CSS pseudo-classes useful for?

Answer 10

when you have to submit a form or hover over something before submitting

Question 11

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

Answer 11

px

units

Question 12

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

Answer 12

font-family

Question 13

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

Answer 13

the default flex-direction is row

Question 14

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

Answer 14

n0-wrap

Question 15

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

Answer 15

they are block elements

Question 16

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

Answer 16

row

Question 17

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

Answer 17

css selector, css property, css value

Question 18

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

Answer 18

you would add a period and then the class name

Example: .title

Question 19

In CSS, how do you select

elements by their type?

Answer 19

you would just type out the name of the element

Question 20

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

Answer 20

using the hashtag then the name of what you want to select

Question 21

fixed positioning vs relative

Answer 21

relative
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. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

Question 22

flex-wrap

Answer 22

nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

Question 23

justify-content

Answer 23

flex-start (default): items are packed toward the start of the flex-direction.
flex-end: items are packed toward the end of the flex-direction.
start: items are packed toward the start of the writing-mode direction.
end: items are packed toward the end of the writing-mode direction.
left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Question 24

flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto, but if you set it with a single number value, like flex: 5;, that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.

Question 25

gap, row-gap, column-gap

Answer 25

The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.

Question 26

position absolute

Answer 26

position where you want it to be such as 1 rem from. the right and 1 rem from the top

Question 27

What are the four components of “the Cascade”.

Answer 27

Source Order, Inheritance, Specificity, & !important

Question 28

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

Answer 28

Source order is, simply put, the 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 29

Why is using !important considered bad practice?

Answer 29

It causes issues with debugging by breaking the natural cascade of style sheet

Question 30

List the three selector types in order of increasing specificity.

Answer 30

Type, Class, ID