CSS

Question 1

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

Answer 1

rule set –> selector { property : value; }

Question 2

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

Answer 2

.selector

Question 3

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

Answer 3

selector

Question 4

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

Answer 4

selector

Question 5

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

Answer 5

rgb() hsl() hex

Question 6

What CSS properties make up the box model?

Answer 6

margin border padding height width

Question 7

what does height and width affect for border proeprties

Answer 7

content

Question 8

Which CSS property pushes boxes away from each other?

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

Answer 8

Margin, padding

Question 9

What is a pseudo-class?

Answer 9

keyword added to a selector that specifies a special state of the selected element(s) … hover… active… focus..

selector: pseudo-class { declaration block }

Question 10

What are CSS pseudo-classes useful for?

Answer 10

let you apply a style to an element with relation to external factors like interaction

Question 11

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

Answer 11

px em %

Question 12

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

Answer 12

row (left to right)

Question 13

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

Answer 13

Wrap

Question 14

flexbox components

Answer 14

container and items inside

Question 15

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

Answer 15

because divs are block elements and take up a whole width and creates new lines in terms of document flow

Question 16

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

Answer 16

row (left to right)

Question 17

flexbox properties that affect the container and what do they do

Answer 17

display: flex : defines a flex container,
flex-direction: specifies direction of flex (row, row-reverse, column, column-reverse,
flex-wrap: allows items to be put in multiple lines,
flex-flow: shorthand for previous two,
justify-content: defines the alignment along the main axis,
align-items: justify content version for cross axis,
align-content: aligns the containers lines,
gap: controls the space between flex items

Question 18

flexbox properties affecting items in container and what do they do

Answer 18

order: controls item order,
flex-grow: increases item size compared to other items,
flex-shrink: shrink item size,
flex-basis: control sizing of items,
flex: shorthand for previous three flex-,
align-self: allows the default alignment (or the one specified by align-items) to be overridden for individual flex items

Question 19

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

Answer 19

position: static;

Question 19

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

Answer 19

same document flow as if static but can change position relative to original place with top bottom left right property with some value.

Question 20

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

Answer 20

position absolute becomes almost like a floating entity and is ignored by the document flow.
position can be changed through top bottom left right property and some value

Question 21

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

Answer 21

can use position relative as parent and have it “floating” in the relative block element and change direction with t b l r properties.

Question 22

What are the four components of “the Cascade”.

Answer 22

source order, inheritance, specificity, !important

Question 23

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

Answer 23

the order of the class list that is applied to the element

Question 24

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

Answer 24

inheritance if the css property allows it

Question 25

List the three selector types in order of increasing specificity.

Answer 25

``` type selector class selector id selector ```

Question 26

Why is using !important considered bad practice?

Answer 26

disrupts cascading

Question 27

The transition property is shorthand for which four CSS properties?

Answer 27

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

Question 28

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

Answer 28

min-width max-width

Question 29

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

Answer 29

viewport meta tag

Question 30

@media syntax?

Answer 30

@media ~only media-type ~and (media-feature: value) { css rule set }

Question 31

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

Answer 31

it does not show anything for that element

Question 32

What is a breakpoint in responsive Web design?

Answer 32

points at which a media query is introduced are known as breakpoints. where media query changes trigger the css rule inside --> setting min-width and such,

Question 33

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 33

it is flexible to the size of the parent element and changes along with it. depending on the current screen size

Question 34

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 34

because of cascading rule that last rule will take precedent over the ones before it.