CSS

Question 1

Collapses in the box model

Answer 1

margin (only largest padding between 2 elements is shown)

Question 2

box model to contain the width with all the elements

Answer 2

*{ box-sizing: border-box}
Its original set to content-box

Question 3

Box model elements

Answer 3

padding, border, margin

Question 4

add a border to an element

Answer 4

border: 4px solid #000

Question 5

define all paddings on a single line

Answer 5

padding: 4px 5px 6px 8px
(trouble, top right bottom left)

Question 6

add different widths to a border

Answer 6

border-width: 10px 30px 40px 50px

Question 7

shrink/grow the width depending on the size of the parent

Answer 7

width: 50%

Question 8

shrink/grow based on the size of the screen

Answer 8

width: 50vw
height: 50vh
(view width, and view height)

Question 9

size based on root font size

Answer 9

font-size: 1rem

Question 10

general root font size

Answer 10

16px

Question 11

size font based on the parent

Answer 11

em, and %

font-size: 1em

Question 12

font css

Answer 12

font-family
font-size
font-style

Question 13

why is using rem better than using pixels

Answer 13

they scale if the user changes the font size of their screen

Question 14

set css for a button

Answer 14

background: red;
border: 1px solid black;
outline: none
cursor:pointer

Question 15

em are used when scaling buttons to the size of the text in:

Answer 15

border-radius: .3em
padding: .5em .3em

Question 16

how to use float

Answer 16

float: left/right
clear: left/right/both

Question 17

document flow display types

Answer 17

display: block
display: inline
display: inline-block (can add width & height)
display: none (removes it)

Question 18

removes the right margin from the last button inside of a footer

Answer 18

.footer .btn:last-child{
margin-right:initial;
}

Question 19

default css position

Answer 19

static

Question 20

css position where you can add top, right, left, bottom

Answer 20

position:relative (lo desplaza relativo a su lugar)

Question 21

css position:absolute

Answer 21

lo deja donde va pero como si no existiera (pone otras cosas abajo de el), lo pone absolutamente en las posiciones del contenedor en el que está. siempre y cuando el parent tenga position: relative o alguno. si no tiene es de toda la página

Question 22

lo deja fijo siempre en un punto cuando haces scroll

Answer 22

position:fixed

Question 23

select an input that it’s not checked

Answer 23

input:not(:checked)

Question 24

use variables

Answer 24

:root{
–primary-color: green
}

.tree{
color:var(–primary-color)
}

Question 25

select paragraphs that don’t have the class of red or green

Answer 25

p:not(.red):not(.green)

Question 26

change the color to red of an input of type text

Answer 26

input[type=”text”]{background-color: red}

Question 27

pseudo elements

Answer 27

p::first-line, p::first-letter