CSS

Question 1

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

Answer 1

Color names
Hex codes
RGB values

Question 2

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

Answer 2

selector { declaration property name: declaration property value; }

Question 3

How are key/value pairs related to CSS?

Answer 3

key/value = name/value

In CSS: property name / property value

Question 4

What are three important considerations for choosing fonts?

Answer 4

Readability
Installed fonts
Sticking with theme

Question 5

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

Answer 5

Fallback fonts in case the selected font is not installed on user’s computer

Question 6

Read the code.

background-color : rgb (0, 0, 0)

Answer 6

There is a property of background color with the value of rgb css function and three parameters of 0, 0 0

Question 7

What CSS properties make up the box model?

Answer 7

Margin
Border
Padding
Content

Question 8

What CSS property pushes boxes away from each other?

Answer 8

Margin property

Question 9

What CSS property pushes box content away from its border?

Answer 9

Padding property

Question 10

What purpose does the CSS Cascade serve?

Answer 10

Determines what styling will be applied to an element

Question 11

What is source order?

Answer 11

The order CSS rules are written in a stylesheet

Question 12

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

Answer 12

Mobile responsiveness

Question 13

What is inheritance?

Answer 13

For certain properties, when applied to a parent element will also get taken on by any child elements
*usually font or text related

Question 14

Why might CSS include inheritance?

Answer 14

Save developers time & keep code DRY

Question 15

What is the purpose of !important?

Answer 15

Highest level of importance for CSS rule

Question 16

When is !important a good tool to use?

Answer 16

Almost never

Question 17

What is specificity?

Answer 17

The weight or importance placed on different types of selectors

Question 18

How is specificity calculated?

Answer 18

Numerical:
0.0.0
(tag selector, class selector, id selector)

Question 19

Why might CSS include specificity?

Answer 19

Gives a tool to add more specificity if needed

To override specificity of an element

Question 20

What is the order of selector strengths for CSS specificity?

Answer 20

Tag selectors
Class selectors
ID selectors

Question 21

What is CSS Cascade?

Answer 21

How CSS determines in what order to apply styling to elements, depending on source order and specificity

Question 22

What are CSS pseudo-classes good for?

Answer 22

Can apply styles to an element in a changed state (like hover) without affecting the DOM

Question 23

What does the transform property do?

Answer 23

Manipulates an element

Question 24

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

Answer 24

:first-child - applies styling to the first element of the specified element type

:last-child - applies styling to the last element of the specified element type

Question 25

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

Answer 25

1. Changing button colors fluidly 2. Resizing images to make an emphasis 3. Hiding an element slowly movement, scale, rotate - small movements

Question 26

Why might transitions be a helpful effect for styling?

Answer 26

More visually appealing for the user, more fluid, UI feel more comfortable for users

Question 27

Are all properties able to be transitioned?

Answer 27

No, only ones that are animatable | *usually ones that have px rem em

Question 28

What are the default width and height of a block-level element?

Answer 28

Width - parent container (all available area) Height - content (auto) starts on new line

Question 29

What are the default width and height of an inline element?

Answer 29

Height - auto | Width - auto

Question 30

What is the initial display property of "div"?

Answer 30

Block

Question 31

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

Answer 31

display: none - removes element from flow of document visibility: hidden - does not affect the flow of webpage

Question 32

What is the difference between block, inline block, inline?

Answer 32

Block - takes all the space Inline - takes only as much space as needed Inline block - still can adjust size but only takes as much space needed

Question 33

Why are CSS resets helpful for cross browser compatibility?

Answer 33

Helps to create consistency among default styling across browsers and lets you start off with the same blank slate instead of trying to fight the browser styling * Leaving very little up to browser stylesheet

Question 34

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

Answer 34

Sometimes you could reset something you don't mean to or harm the page

Question 35

What is an argument against using CSS resets?

Answer 35

It slows down the load times of webpage | Might end up resetting that value again anyway

Question 36

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

Answer 36

Position: static;

Question 37

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

Answer 37

Element appears relative to where it was originally | Original space remains there, does not affect document flow

Question 38

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

Answer 38

Element appears relative to it's parent container/element (whose position isn't static) Taken out of the document flow

Question 39

What are the box offset properties?

Answer 39

``` Top Right Bottom Left * affect the positioning of the element when not static ```

Question 40

What were floats originally designed for?

Answer 40

Originally designed to allow developers to float text around image element like in print

Question 41

What are clears for with floats?

Answer 41

No other element within the same parent container can touch the left or right (or both) sides

Question 42

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

Answer 42

flex-direction: row;

Question 43

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

Answer 43

flex-wrap: no-wrap;

Question 44

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

Answer 44

Mostly good for one dimensional layouts (single row or column) Needs to have set sizing

Question 45

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

Answer 45

To maintain proper sizing & spacing | Working on a team because allows you better understand code

Question 46

What are the three core parts of a grid system?

Answer 46

Container Row Column

Question 47

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

Answer 47

More flexible/responsive - px would require more work to change Evenly spaced across container

Question 48

What is a modal?

Answer 48

CSS display property value that allows you to overlay an element over a parent element or website ** Pop up window in the viewport that we are in control of

Question 49

What are some use cases for modals?

Answer 49

``` Error alert Warning before proceeding Ad Verification, login When a news site wants you to subscribe before you can read their news article or turn off adblocker ```

Question 50

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

Answer 50

To prevent the user from interacting with the site before you want them to

Question 51

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

Answer 51

Color, width, height

Question 52

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

Answer 52

< meta name="viewport" content="width=device-width, initial-scale=1" >