CSS

Question 1

What are the four components of “the Cascade”.

Answer 1

inheritance, specificity, !important, source order

Question 2

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

Answer 2

In CSS the last style rule set for a selector takes effect

Question 3

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

Answer 3

inheritance

Question 4

List the three selector types in order of increasing specificity.

Answer 4

class column, type column, no value ( ),

Question 5

Why is using !important considered bad practice?

Answer 5

it overrides everything

Question 6

The transition property is shorthand for which four CSS properties?

Answer 6

transition - property, duration, timing-function, delay

Question 7

What does the transform property do?

Answer 7

lets you rotate, scale, skew, or translate an element.

Question 8

Give four examples of CSS transform functions.

Answer 8

Rotate, translate, scale, and skew

Question 9

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

Answer 9

selector, declaration, property, value

Question 10

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

Answer 10

.then name of class attribute

Question 11

In CSS, how do you select elements by their tag name?

Answer 11

just the name of the element

Question 12

In CSS, how do you select an element by it’s id attribute?

Answer 12

• # then name of id attribute

Question 13

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

Answer 13

rgb, hex, hsl

Question 14

What CSS properties make up the box model?

Answer 14

border, margin, padding, height and width

Question 15

What CSS property pushes boxes away from each other?

Answer 15

margin

Question 16

Which CSS property add space between a box’s content and it’s border?

Answer 16

padding

Question 17

What is a pseudo-class?

Answer 17

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

Question 18

What are CSS pseudo-classes useful for?

Answer 18

Easier to target css selectors that involve user interaction

Question 19

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

Answer 19

px and rem

Question 20

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

Answer 20

font-family

Question 21

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

Answer 21

row

Question 22

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

Answer 22

nowrap

Question 23

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

Answer 23

they are block elements

Question 24

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

Answer 24

row

Question 25

What are the 3 primary components of a page layout? (Which helper classes do you need)?

Answer 25

containers, columns, and rows

Question 26

What is the minimum number of columns that you should put in a row?

Answer 26

at least one

Question 27

What is the purpose of a container?

Answer 27

to group your rows and columns easier (basically similar to an outline)

Question 28

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

Answer 28

static

Question 29

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

Answer 29

It moves the element in relation to where it would have been in normal flow

Question 30

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

Answer 30

using offset properties you can indicate how far to move the element from where it would have been in normal flow

Question 31

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

Answer 31

it is taken out of normal flow and no longer affects the position of other elements on the page (it’s like the element no longer exists)

Question 32

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

Answer 32

the element can be positioned anywhere on the page relative to within the boundary of the next ancestor non static block

Question 33

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

Answer 33

by using the ancestor container that is not static

Question 34

Where are the four box offset properties?

Answer 34

top, bottom, left, and right

Question 35

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

Answer 35

Width, hover

Question 36

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

Answer 36

<meta></meta>

with the name=”viewport”

Question 37

What is a breakpoint in responsive Web design?

Answer 37

different rule set for different parameters

Question 38

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 38

it would scale with whatever the view page size is rather than having a set value and not adjust to the view page

Question 39

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 39

because of the CSS cascade where the most recent rule set has priority