CSS Flashcards
Collapses in the box model
margin (only largest padding between 2 elements is shown)
box model to contain the width with all the elements
*{ box-sizing: border-box}
Its original set to content-box
Box model elements
padding, border, margin
add a border to an element
border: 4px solid #000
define all paddings on a single line
padding: 4px 5px 6px 8px
(trouble, top right bottom left)
add different widths to a border
border-width: 10px 30px 40px 50px
shrink/grow the width depending on the size of the parent
width: 50%
shrink/grow based on the size of the screen
width: 50vw
height: 50vh
(view width, and view height)
size based on root font size
font-size: 1rem
general root font size
16px
size font based on the parent
em, and %
font-size: 1em
font css
font-family
font-size
font-style
why is using rem better than using pixels
they scale if the user changes the font size of their screen
set css for a button
background: red;
border: 1px solid black;
outline: none
cursor:pointer
em are used when scaling buttons to the size of the text in:
border-radius: .3em
padding: .5em .3em
how to use float
float: left/right
clear: left/right/both
document flow display types
display: block
display: inline
display: inline-block (can add width & height)
display: none (removes it)
removes the right margin from the last button inside of a footer
.footer .btn:last-child{
margin-right:initial;
}
default css position
static
css position where you can add top, right, left, bottom
position:relative (lo desplaza relativo a su lugar)
css position:absolute
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
lo deja fijo siempre en un punto cuando haces scroll
position:fixed
select an input that it’s not checked
input:not(:checked)
use variables
:root{
–primary-color: green
}
.tree{
color:var(–primary-color)
}
select paragraphs that don’t have the class of red or green
p:not(.red):not(.green)
change the color to red of an input of type text
input[type=”text”]{background-color: red}
pseudo elements
p::first-line, p::first-letter
