CSS

Question 1

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

Answer 1

Selector and Declaration Block

Question 2

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

Answer 2

.class {

}

Question 3

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

Answer 3

type {

}

Question 4

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

Answer 4

id {

}

Question 5

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

Answer 5

rgb(), #hexadecimal, name & hsl()

Question 6

What CSS properties make up the box model?

Answer 6

width: ;
height: ;
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 keyword used in selectors to specify special states of the targeted element(s), such as
:hover,
:checked,
:visited

Question 10

What are CSS pseudo-classes useful for?

Answer 10

Allows you to apply style to a element not only in relation to the content of the document tree, but also in relation to external factors.

Question 11

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

Answer 11

px,
em,
pt

Question 12

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

Answer 12

font-family: ;

Question 13

. column-full {
width: 100%;
}

Answer 13

on line 1 we have a new css rule set with a selector for the column-full class, and then the opnening curly braces for the declaration block;

on line 2 we have a width property with the value of 100%:

on line 3 we have the closing curly braces for the declaration block.

Question 14

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

Answer 14

row

Question 15

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

Answer 15

nowrap

Question 16

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

Answer 16

Since they are block-elements, they occupy the full widht of their line and push to the next one any other element.

Question 17

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

Answer 17

row

Question 18

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

Answer 18

position: static;

Question 19

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

Answer 19

it doesn’t.

Question 20

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

Answer 20

it doesn’t.

Question 21

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

Answer 21

it removes it from the flow, making the other elements to rearrange themselves.

Question 22

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

Answer 22

the element appears on the top-left corner of it’s containing block

Question 23

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

Answer 23

by having some non-static ancestor block around it

Question 24

What are the four box offset properties?

Answer 24

top,
bottom,
left,
right

Question 25

What are the four components of “the Cascade”.

Answer 25

Source Order, Inheritance, Specificity and !important

Question 26

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

Answer 26

It means that, the futher down the css document a rule set is written, all else being equal, it’ll have priority over prior rule set.

Question 27

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

Answer 27

thanks to Inheritance

Question 28

List the three selector types in order of increasing specificity.

Answer 28

type, .class and #id

Question 29

Why is using !important considered bad practice?

Answer 29

it breaks with the rest of cascading priorities, and cannot be dealt with unless deleted

Question 30

What does the transform property do?

Answer 30

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

Question 31

Give four examples of CSS transform functions.

Answer 31

transform: rotate();
transform: translate();
transform: skew();
transform: scale();
transform: matrix();

Question 32

The transition property is shorthand for which four CSS properties?

Answer 32

transition-property: ;
transition-duration: ;
transition-timing-function: ;
transition-delay: ;

Question 33

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

Answer 33

(min-width: )

max-width:

Question 34

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

Answer 34

< meta name=”viewport” >