CSS Quiz Questions

Question 1

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

Answer 1

A selector, declaration block, property, value

Question 2

How are key/value pairs related to CSS?

Answer 2

They allow you to edit elements on an HTML page

Question 3

What are three important considerations for choosing fonts?

Answer 3

Readability, theme, fallback fonts

Question 4

Why must you have backup fonts assigned when selecting custom fonts?

Answer 4

Incase the computer does not have the selected font

Question 5

What CSS properties make up the box model?

Answer 5

margin, border, padding, content

Question 6

Which CSS property pushes boxes away from each other?

Answer 6

margin

Question 7

Which CSS property pushes box content away from its border?

Answer 7

padding

Question 8

What purpose does the CSS Cascade serve?

Answer 8

What styling will take priority

Question 9

What is source order?

Answer 9

The order the css has been written

Question 10

In what situations might you need to apply styling to a single element multiple times in one stylesheet?

Answer 10

Mobile responsiveness (Phones)

Question 11

What is inheritance?

Answer 11

When a child of an element gets a computed value that has been declared in the parent element

Question 12

Why might CSS include the inheritance feature?

Answer 12

Timeliness

Question 13

Is inheritance a good tool to use for styling? If so, on what occasions?

Answer 13

Yes. It cuts down on the amount of code you have to use, which saves time

Question 14

What is the purpose of !important?

Answer 14

To override every style that has taken place prior

Question 15

When is !important a good tool to use?

Answer 15

When it is crucial, but it is almost never to be used

Question 16

What is specificity?

Answer 16

The strength of a specific css selector

Question 17

How is specificity calculated?

Answer 17

through the weight of a css selector in the specificity hierarchy

Question 18

Why might CSS include this feature?

Answer 18

To be more specific in choosing an element to style.

Question 19

What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?

Answer 19

id, class, element from greatest specificity to least

Question 20

What is the CSS Cascade?

Answer 20

inheritance, source order, specificity, and importance

Question 21

What are CSS pseudo-classes useful for?

Answer 21

added to a selector that specifies a special state of the selected element(s)

Question 22

What does the transform property do?

Answer 22

It allows you to adjust how an element will look on the DOM

Question 23

What is the difference between the first-child pseudo selector and the last-child pseudo selector?

Answer 23

The first-child represents the first element among a group of sibling elements where as last represents the last element

Question 24

What is the LVHA order?

Answer 24

Link, visit, hover, active

Question 25

What are 3 examples of what can be done with CSS transitions?

Answer 25

color slowly changing into different color, make an image grow or shrink, rotation of an element

Question 26

Why might transitions be a helpful effect for styling?

Answer 26

Helping your UI feel more comfortable for your user

Question 27

Are all properties able to be transitioned?

Answer 27

No not all properties are animatable

Question 28

What is the initial display property of divs?

Answer 28

block element

Question 29

What is the difference between display: none and visibility: hidden?

Answer 29

display none is not visible on the page and doesn't take up any space. Visibility hidden can't be seen, but still takes up space on the document

Question 30

What is the difference between the block, inline block, and inline display properties?

Answer 30

block starts on a new line, inline starts on same line, and inline block is the same as inline, but can be resized

Question 31

Why are CSS resets helpful for cross browser compatibility?

Answer 31

It will make css more consistent with other browsers

Question 32

Why is it important to be mindful of what you reset with your CSS resets?

Answer 32

It can change your page in ways you wouldn't want

Question 33

What is an argument against using CSS resets?

Answer 33

It can slow down pages

Question 34

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

Answer 34

Static positioning

Question 35

How does setting position relative on an element affect document flow and where the element appears on the page?

Answer 35

It moves it relative to where it would have started out. It does not affect document flow entirely.

Question 36

How does setting position absolute on an element affect document flow and where the element appears on the page?

Answer 36

It gets removed from the page completely and snaps to the first non-static object.

Question 37

What are the box offset properties?

Answer 37

Top, bottom, left, and right

Question 38

What were floats originally designed for?

Answer 38

Float was originally designed to allow developers to float text around image elements similar to the way newspapers and magazines would display text.

Question 39

What are clears for with floats?

Answer 39

The clear property allows you to say that no element (within the same containing element) should touch the left or righthand sides of a box, which will start a new line

Question 40

What are some of the downsides for using floats in layout design?

Answer 40

Floats are a lot of work and its complicated.

Question 41

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

Answer 41

row

Question 42

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

Answer 42

nowrap

Question 43

Why should flexbox not be used for building complete web page layouts?

Answer 43

Flexbox should be used for smaller design items rather than the whole webpage.

Question 44

Why is it important to use a grid system for CSS layouts?

Answer 44

Code is easier to read in a grid system.

Question 45

What are the three core parts of a grid system?

Answer 45

Container, row, column

Question 46

Why is it a good idea to use percentages for grid column widths?

Answer 46

Percentages are useful for mobile responsiveness.

Question 47

What is a modal?

Answer 47

modal box is a scripted effect that allows you to overlay a small element over a website

Question 48

What are some use cases for modals?

Answer 48

Error: To alert users of an error. Warning: To warn users of potentially harmful situations. Data: To collect data from users. Confirm or Prompt: To remind users to do something before moving on. Helper: To inform users of important information.

Question 49

Why does a modal usually need to occupy the entire height and width of the viewport?

Answer 49

So it can't be scrolled past fun fact: you can sometimes delete the modal in the dev tools

Question 50

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

Answer 50

width and color

Question 51

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

Answer 51

meta viewport tag