CSS

Question 1

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

Answer 1

first part is a selector

followed by opening curly brace of the declaration block

followed by the declaration (property then value)

followed by closing curly brace of the declaration block

Question 2

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

Answer 2

put a dot “.” in front of the class name when declaring the selector

Question 3

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

Answer 3

put just the element name as the selector

Question 4

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

Answer 4

put a hash (#) symbol in front of the id

Question 5

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

Answer 5

RGB
hexcode
name of color

Question 6

What CSS properties make up the box model?

Answer 6

Margin

border

padding

height

width

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

margin

Question 8

Which CSS property adds 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 CSS selector that species a special state that the selector is in

Question 10

What are CSS pseudo-classes useful for?

Answer 10

styling of elements in relation to external factors and in relation to the document tree

ie change appearance of elements when a user interacts with them

Question 11

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

Answer 11

px

em

percent (%)

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

row (left to right)

Question 14

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

Answer 14

nowrap (meaning all flex items will try to be kept on one line)

Question 15

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

Answer 15

because they are block elements meaning they start on a new line and take up that entire line

Question 16

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

Answer 16

row

Question 17

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

Answer 17

static (each block level element sits on top of the next one.)

Question 18

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

Answer 18

it does not affect the document flow, relative position only affects the position of the element.

ie you move the element and it will shift over to wherever you tell it to without shifting any surrounding items

Question 19

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

Answer 19

it shifts the targeted element a certain distance away from where its original position would have been in the normal flow

Question 20

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

Answer 20

absolute takes the element out of the normal flow and shifts the next element into its original spot.

Question 21

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

Answer 21

it will either lay on top or behind the surrounding elements.

Question 22

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

Answer 22

set the position of the containing block to “relative”

Question 23

What are the four box offset properties?

Answer 23

top
right
bottom
left

Question 24

What are the four components of “the Cascade”

Answer 24

Source order
Inheritance
specificity
!important

Question 25

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

Answer 25

the order that CSS is written in the stylesheet.

the last ruleset on the list takes priority.

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
apply the css rule to only the parent and no css rule to the children
the children will “inherit” the parents’ css styling if the children have no specified styling

Question 27

List the three selector types in order of increasing specificity.

Answer 27

type selector (elements and pseudo elements)
class selector (classes and pseudo classes
ID selector

Question 28

Why is using !important considered bad practice?

Answer 28

makes it harder to debug because it breaks the natural cascading of your stylesheet.

Question 29

What does the transform property do?

Answer 29

lets you ‘transform’ the image by rotating, skewing, scaling, or translating an element
modifies the coordinate space of the css.

Question 30

Give four examples of CSS transform functions.

Answer 30

matrix
translate
scale
rotate
skew

Question 31

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

Answer 31

color
device-height
device-width
min-width

Question 32

The transition property is shorthand for which four CSS properties?

Answer 32

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

Question 33

What is the effect of setting an element to display: none?

Answer 33

it “hides” the targeted element and all its descendants. it is removed from the document flow and is no longer visible.

Question 34

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 34

it scales down/up with the window if it is a percent. fixed width will try to keep the width the same size no matter what

Question 35

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 35

because of “cascading”. more specificity towards the rules closer to the bottom.