CSS

Question 1

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

Answer 1

selectors
declaration block
property:value (also called declaration)

Question 2

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

Answer 2

using a “.” in front of the class name

Question 3

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

Answer 3

use an element name

Question 4

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

Answer 4

using # in front of the id name

Question 5

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

Answer 5

RBG
HEX
Color name

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 –> youre like gaining weight

Question 8

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

Answer 8

padding –> it’s like wearing a big puffy jacket
things inside is the same but outside is getting bigger

Question 9

What is a pseudo-class?

Answer 9

it is a class that gives a special effect to the selector whether it’s for the user or where it falls on html document.

Question 10

What are CSS pseudo-classes useful for?

Answer 10

allows style changes and it allows users to interact with the elements

Question 11

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

Answer 11

px
%
em

Question 12

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

Answer 12

font-size

Question 13

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

Answer 13

row

Question 14

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

Answer 14

try to fit in one line but it can wrap as needed

Question 15

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

Answer 15

because div is a block element

Question 16

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

Answer 16

to make the direction into a row –> left to right

Question 17

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

Answer 17

container
row
column

Question 18

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

Answer 18

1

Question 19

What is the purpose of a container?

Answer 19

to confine all the content into one box

Question 20

what is the purpose of the row class

Answer 20

to declare that there is a new row formed on the page layout

one vertical chunk and there is a row

Question 21

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

Answer 21

static

Question 22

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

Answer 22

it allows the element to move relative to where it was supposed to be
if you move it around, the sibling will still think that you are in the same place still even if it’s not

Question 23

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

Answer 23

it moves relative to its original position

Question 24

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

Answer 24

the element will stay on the page position while the page move up and down

element removed from the page - act as if it’s not there from the document

absolute is useful for layering

Question 25

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

Answer 25

the absolute element is encapsulated by the closest ancestor element that’s
position:relative – nearest non-static ancestor or parent element

Question 26

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

Answer 26

assign it to the position: fixed or position: relative (more desireable)
as long as they are not static but relative has less consequences

Question 27

What are the four box offset properties?

Answer 27

top, right, bottom, and left

Question 28

What are the four components of “the Cascade”.

Answer 28

inheritance, specificity, source order, !important

Question 29

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

Answer 29

whatever is written the most recent is what takes priority
governs the priority in the stylesheet

Question 30

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

Answer 30

inheritance

Question 31

List the three selector types in order of increasing specificity.

Answer 31

type < class < id

Question 32

Why is using !important considered bad practice?

Answer 32

because there’s no turning back once it is used!!!

Question 33

What does the transform property do?

Answer 33

Let’s you rote, scale, skew, or translate an element
modifies the coordinate space of the CSS formatting model

Question 34

Give four examples of CSS transform functions.

Answer 34

rotate, scale, translate, skew, matrix

Question 35

The transition property is shorthand for which four CSS properties?

Answer 35

transition-duration
transition timing function
transition delay
transition preoperty

Question 36

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

Answer 36

min-width & max-width

Question 37

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

Answer 37

viewport-meta tag

Question 38

What is the affect of setting an element to display: none?

Answer 38

got removed from the document flow

Question 39

What is a breakpoint in responsive Web design?

Answer 39

the points at which a media query is introduced
styling changes in the specific moment**

Question 40

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 40

it’s able to adapt to its new environment when width changes size
when its px, your layout would look weird faster when you change the size
when you use %, you have more wiggle room so you don’t need that many @media query

Question 41

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 41

due to the source order
the lower styling is stronger than the before