CSS

Question 1

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

Answer 1

the selector

opening bracket of the declaration block

properties: values;

closing bracket of the declaration block

Question 2

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

Answer 2

You select elements by their class attribute with a .classname

Question 3

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

Answer 3

You select elements by their type by using their name

Question 4

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

Answer 4

You select elements by its ID attribute with a #idName

Question 5

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

Answer 5

hexcode

RGB(red, green, blue)

color presets

Question 6

What CSS properties make up the box model?

Answer 6

margins
borders
padding

width and height
the content within the box

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

The margin property

Question 8

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

Answer 8

The padding property

Question 9

If two boxes sit on top of one another, what happens?

Answer 9

The border of the boxes collapse. The margin will be the larger of the two boxes.

Question 10

What is a pseudo class?

Answer 10

They are classes appended to elements in CSS that makes the elements behave differently when interacted with.

Question 11

What are CSS pseudo classes useful for?

Answer 11

They’re useful for making a page feel more interactive.

Question 12

What order must pseudo classes be in?

Answer 12

:link, :visited, :hover, :focus, :active

Question 13

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

Answer 13

rem
pixels (px)
ems
percentages

Question 14

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

Answer 14

font-family

Question 15

Which property adds emphasis to text? What two values can it have?

Answer 15

font-weight

normal, bold

Question 16

Which property can make font either normal, italic, or oblique?

Answer 16

font-style

Question 17

What is the default size of text in browsers?

Answer 17

16px

Question 18

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

Answer 18

The default flex-direction is “row”

Question 19

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

Answer 19

The default flex-wrap is “nowrap”

Question 20

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

Answer 20

Because div elements are block elements.

Question 21

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

Answer 21

The default flex-direction of an element with display: flex is “row”

Question 22

How do you enable flex context for an elements children?

Answer 22

You give their parent (container) a display property with a value of “flex”

display: flex;

Question 23

What does flex-direction do?

Answer 23

It establishes the main-axis, defining the direction that flex items are placed within their container.

Question 24

What does flex-wrap do?

Answer 24

Flex-wrap makes flex items begin on a new line after taking up all of the available horizontal space

Question 25

What is a utility class?

Answer 25

It’s meant to be re-used and the class name describes what it does

Question 26

What is a semantic class?

Answer 26

A descriptive class named for what it represents. class=”character” is most likely a placeholder for a character

Question 27

What are the only properties your “container”, “row”, “column” classes have?

Answer 27

.container {
max-width: 800px
margin: 0 auto;
}

.row {
display: flex;
}

.column-full {
width: 100%;
}

(fractions as deemed necessary)

.column-half {
width: 50%;
}

Question 28

What is the default value for the position property?

Answer 28

static

Question 29

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

Answer 29

It doesn’t affect document flow. Surrounding elements will stay in their normal positions.

Question 30

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

Answer 30

It moves the element relative to where it WOULD HAVE been in normal flow

Question 31

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

Answer 31

The element is removed from document flow and surrounding elements will fill the space

Question 32

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

Answer 32

You make it’s container non-static. You set the container’s position to relative

position: relative

Question 33

What are the four box offset properties?

Answer 33

top,
right,
bottom,
left

Question 34

What are the four components of “the Cascade”

Answer 34

source order
inheritance
specificity

Question 35

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

Answer 35

the order that your CSS rules are written

the LAST ruleset written will take precedence over the previous ones

Question 36

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

Answer 36

by inheritance

a parent elements styling will apply to its children

Question 37

What does the transform property do?

Answer 37

It allows us to change the positioning of an element by rotating, scale, skew, or translating it

Question 38

Give four examples of CSS transform functions

Answer 38

rotate
translate
scale
skew

Question 39

The transition property is shorthand for which four CSS properties?

Answer 39

transition-property
transition-duration
transition-timing-function
transition-delay

Question 40

What is a breakpoint in responsive Web design?

Answer 40

a point in the viewport width where the styles change

Question 41

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 41

it adapts better

Question 42

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 42

because of source order