css essential 2

Question 1

True or false. inline-block can use to setup navigation links.

Answer 1

TRUE

Question 2

The inline-block is always a problem–Dealing ____ of inline-block elements

Answer 2

WHITESPACES

Question 3

How could you solve whitespace-problem of an inline-block? Solution 1 https://i.imgur.com/Y2z3Gue.png

Answer 3

No Space between elements. it may be a problem for readability of HTML codes.

Question 4

What trick font-size property does?

https://i.imgur.com/TwqlYDR.png

Answer 4

font-size:0 on the parent element of inline-element and then reset on inline element removes spaces between inline-element.

Question 5

Why there is an unnecessary HTML comment on every inline-block? https://i.imgur.com/D6JvrqG.png

Answer 5

HTML comments on every inline-block element and Droping the closing bracket to the newline removes
extra spaces between inline-block elements

Question 6

Negative margin? why https://i.imgur.com/q7K745y.png

Answer 6

Negative margin removes extra spaces between inlin-block elements

Question 7

Dropping the closing angle? what the fuck is that?

https://i.imgur.com/OBiukoS.png

Answer 7

Yeah this is another trick to remove extra spaces between inline-block elements . Simply use nav tag

Question 8

______ allows you to specify the position of an element. e.g. left, right.

Answer 8

Float property

Question 9

What clear property does https://i.imgur.com/ipqiUYw.png

Answer 9

If the element can be fit horizontally in the space next to the floated element, It will fit itself. <b>Unless you apply the clear property in the same direction of the float property</b>

Question 10

Floated element problem:

https://i.imgur.com/T3XcSyt.png

Answer 10

contained element when floated overlaps to the container element

Question 11

What would be happened when you apply float property to the anchor tag

Answer 11

No space between the floated anchor tags and the height of a floated elements are zero, so if there is a background color on a parent element, background color does not show. it also makes a block element

Question 12

What are the alternative solutions for creating navigation instead of an anchor tag

Answer 12

nav element and flexbox

Question 13

____ property is used to arrange elements relative to the default flow or browser viewport

Answer 13

Position

Question 14

The element is positioned according to normal position

Answer 14

position:Relative

Question 15

positioned relative to the browser window

Answer 15

positon:fixed

Question 16

Positioned to its first positioned ancestor element(not static). remove to the natural flow of the page

Answer 16

positon:absolute

Question 17

positioned to the user’s scroll position

Answer 17

position:sticky

Question 18

Pre-written stylesheet containing rules that override all default browser style to an un-styled baseline. normalize another fix

Answer 18

Reset stylesheet

Question 19

Prewritten stylesheet containing rules that aim to create consistent default styles, rather than removing them. https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e

Answer 19

Normalize

Question 20

Applies different CSS properties according to different screen sizes

Answer 20

Media Query

Question 21

a CSS background property that fixes a background to the viewport

Answer 21

background-attachment:fixed|scroll;

Question 22

allows you to move background image around within its container( select which part to show)

Answer 22

background-positon:

Question 23

the size of an image background

Answer 23

background-size: length(width and height)| cover| contain|

Question 24

a background-size property value that covers the entire container

Answer 24

cover

Question 25

a background-size property value that resizes the background image to make sure the image is fully visible (not so stretch)

Answer 25

contain

Question 26

mnemonic for background property

Answer 26

<b>I. P.</b> man <b>Re</b>sends An<b> Origin</b>al <b>CL</b>ear <b>C</b>opy

Question 27

What are media types

Answer 27

print
speech
screen
all

Question 28

this is a media type that matches the printer

Answer 28

print

Question 29

this is a media type that matches screen reader

Answer 29

speech

Question 30

this is a media type that matches all devices that are not print or speech

Answer 30

screen

Question 31

this is a media type that matches to all devices

Answer 31

all

Question 32

what are CSS property that is used with media query types

Answer 32

min-width and max-width, and width

Question 33

is a CSS rule that selects all input element that has type=search

Answer 33

[type=’search’]{

}

Question 34

what are the sibling combinators

Answer 34

adjacent(+) which selects the next element

general(~) which select all next elements

Question 35

https://i.imgur.com/vJ4I9C5.png

How could you select the element next to h2 element

Answer 35

h2+p{
/*selects paragraph 2 */
}

Question 36

https://i.imgur.com/vJ4I9C5.png

HOw could you select paragraph 2~4 next to h2 element

Answer 36

h2~p{
/*selects paragraph 2~4*/
}

Question 37

is a keyword added to a selector with : for a specific state. For example, hover and visited of an anchor tag

Answer 37

Pseudo-class selector

Question 38

select every first child of a parent elements

https://i.imgur.com/57uwQDL.png

Answer 38

p:first-child{
color:red;
}

Question 39

select every last child of a parent elements

https://i.imgur.com/57uwQDL.png

Answer 39

p:last-child{
color:red;
}