CSS

Question 1

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

Answer 1

A selector, declaration, property, value

Question 2

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

Answer 2

Period before the selector

Question 3

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

Answer 3

Match the elements name

Question 4

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

Answer 4

Hash before the selector

Question 5

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

Answer 5

Name, RGB, Hex Code, RGBA, etc.

Question 6

What CSS properties make up the box model?

Answer 6

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

What is a pseudo-class?

Answer 9

a CSS added keyword to a selector that specifies a certain state of that selected element

Question 10

What are CSS pseudo-classes useful for?

Answer 10

They allow you to apply style that gives effect to elements

Question 11

Name at least two units of type size in CSS.

Answer 11

em, px, percentages

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

Question 15

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

Answer 15

because they are block elements

Question 16

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

Answer 16

row, left to right

Question 17

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

Answer 17

static

Question 18

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

Answer 18

It does not

Question 19

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

Answer 19

it does not affect where it is on the page at all, but it affects where the other elements get placed

Question 20

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

Answer 20

it no longer has a place in document flow

Question 21

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

Answer 21

it goes through each of its parent elements until it finds a parent element that is not static.

Question 22

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

Answer 22

set the parent 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, specificity, inheritance, !important.

Question 25

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

Answer 25

in what order the code is written in the file.

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

if it is an inherited property

Question 27

List the three selector types in order of increasing specificity.

Answer 27

element type, class, id

Question 28

Why is using !important considered bad practice?

Answer 28

It makes debugging more difficult by breaking the natural cascading in your stylesheets

Question 29

What does the transform property do?

Answer 29

it allows a few different ways to adjust the element.

Question 30

Give four examples of CSS transform functions.

Answer 30

rotate, scale, skew, and translate.

Question 31

The transition property is shorthand for which four CSS properties?

Answer 31

transition-property, transition-duration, transition-timing-function, and transition-delay

Question 32

Which HTML meta tag is used in mobile-responsive web pages?

Answer 32

meta name viewport

Question 33

What is the event.target?

Answer 33

the object that the event was used on

Question 34

Why is it possible to listen for events on one element that actually happen its descendent elements?

Answer 34

because of event flow

Question 35

What DOM element property tells you what type of element it is?

Answer 35

tagName property

Question 36

What does the element.closest() method take as its argument and what does it return?

Answer 36

it takes a string of the CSS selector and returns the closest ancestor with that string name

Question 37

How can you remove an element from the DOM?

Answer 37

you can use the remove method

Question 38

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

Answer 38

by using event delegation.

Question 39

What is a breakpoint in responsive Web design?

Answer 39

The points at which a media query is introduced

Question 40

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 40

the percentage changes with the window size while the fixed value stays as it is

Question 41

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 41

because of source order