CSS

Question 1

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

Answer 1

selector {declaration} declaration = (property:) (value)

Question 2

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

Answer 2

using the .class selector

Question 3

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

Answer 3

just using the tag type

Question 4

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

Answer 4

using the #id selector

Question 5

What CSS properties make up the box model?

Answer 5

margin, padding, border, height, width

Question 6

Which CSS property pushes boxes away from each other?

Answer 6

Margin

Question 7

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

Answer 7

padding

Question 8

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

Answer 8

rgba, rgb, hexcode, color

Question 9

What is a pseudo-class?

Answer 9

Class that comes from a special state. under the browser’s control. You can prepare for them but not control them.

Question 10

What are CSS pseudo-classes useful for?

Answer 10

they make things easier as they allow interaction with the user.

Question 11

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

Answer 11

row

Question 12

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

Answer 12

no wrap.

Question 12

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

Answer 12

div elements are block elements and take up the entire row

Question 13

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

Answer 13

row

Question 14

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

Answer 14

container, column, row

Question 15

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

Answer 15

1

Question 16

What is the purpose of a container?

Answer 16

boundary of content

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

no effect on document flow. like a out of body feeling.

Question 19

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

Answer 19

move relative where it would normally exist if static.

Question 20

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

Answer 20

it affects it as if it doesn’t exist.

Question 21

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

Answer 21

absolutes are taken off of the page entirely so it finds an environment to exist in so it’s looking for any position layout.

Question 22

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

Answer 22

its positioned against its first non static ancestor, But if not found, it positioned against page.

Question 23

What are the four box offset properties?

Answer 23

top, bottom, left, right.

Question 24

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

Answer 24

em, rem

Question 25

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

Answer 25

font-family

Question 26

What is the purpose of variables?

Question 27

How do you declare a variable?

Answer 27

with the key word var const or let set to a value

Question 28

How do you initialize (assign a value to) a variable?

Answer 28

=

Question 29

What characters are allowed in variable names?

Answer 29

Var name rules must start with _ $ or a letter but no numbers. can contain anything - or . within name. no keywords or reserved words.

no same name. Should describe what is stored and should be in camelcase.

Question 30

What does it mean to say that variable names are “case sensitive”?

Answer 30

same names with different cases are considered different variables

Question 31

What is the purpose of a string?

Answer 31

to store numbers, letters, and other characters

Question 32

What is the purpose of a number?

Answer 32

to store a number for arithmetics

Question 33

What are the four components of “the Cascade”.

Answer 33

source order, inheritance, specificity, !important

Question 34

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

Answer 34

the bottom css source with the same weight value will have its property inherited.
Styling closer to the bottom has higher priority.

Question 35

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

Answer 35

inheritance.

Question 36

List the three selector types in order of increasing specificity.

Answer 36

type, class, id

Question 37

Why is using !important considered bad practice?

Answer 37

It is applied no matter the specificity so same layers will be applied to greater specificity.

Question 38

The transition property is shorthand for which four CSS properties?

Answer 38

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

Question 39

What does the transform property do?

Answer 39

It lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Question 40

Give four examples of CSS transform functions.

Answer 40

matrix translate rotate skew scale

Question 41

What is a breakpoint in responsive Web design?

Answer 41

It is the point were the content and design will adapt.

Question 42

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 42

for the sake of it scaling instead of being stuck looking nice under one size

Question 43

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 43

source order

Question 44

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

Answer 44

<meta></meta>

Question 45

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

Answer 45

print and screen