List of inline elements

b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img,
map, object, q, script, span, sub, sup, button, input, label, select, textarea

List of block level elements

P, h1, h2, h3, h4, h5, h6, ol, ul, pre, address, blockquote, dl, div, fieldset, form, hr, noscript, table

Backgrounds

background
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background-origin
background-clip
Definición y ejercicios

background: Abreviación para utilizar la propiedad

background-color: Establezca el color de fondo de una página

body{
     background-color: black;  
 }
https://codepen.io/edisonrodriguezvelez/pen/rNeejOe

background-image: establece una o más imágenes de fondo para un elemento

url | gradients | none

}
body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif);  
 }
https://codepen.io/edisonrodriguezvelez/pen/vYGGgyr

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif);
  background-image: none;
 }
https://codepen.io/edisonrodriguezvelez/pen/OJNNZPJ

h1{
     background-image: linear-gradient(red, orange);
 }
.lol{
    background-image: linear-gradient(to right, red , yellow);
}
.lol1{
    background-image:linear-gradient(
      to top, red, yellow);
}
h2{
    background-image:linear-gradient(
      to top right, red, yellow);
}

h3{
   background-image:linear-gradient(45deg, red, #f06d06);
}
h4{
  background-image:linear-gradient(to right, red, 
      #f06d06, rgb(255, 255, 0), green);
}
h5{
  background-image:linear-gradient( to right, red, yellow 10%);
}
https://codepen.io/edisonrodriguezvelez/pen/QWNNmrw

background-repeat: propiedad establece si y cómo se repetirá una imagen de fondo.

repeat | repeat-x | repeat-y |no-repeat

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: repeat;
 }
https://codepen.io/edisonrodriguezvelez/pen/LYNNdOe

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: repeat-x;
 }
https://codepen.io/edisonrodriguezvelez/pen/MWyyVOy

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: repeat-y;
 }
https://codepen.io/edisonrodriguezvelez/pen/KKzzoZp

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: no-repeat;
 }
https://codepen.io/edisonrodriguezvelez/pen/zYqqWzN

background-position: establece la posición inicial de una imagen de fondo.

top left | top center | top right | center left | center center | center right | bottom left | bottom
center | bottom right | x-% y-% | x-pos y-pos

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: no-repeat;
     background-position:right top; 
 }

https://codepen.io/edisonrodriguezvelez/pen/mdPPRwz

background-size: propiedad especifica el tamaño de las imágenes de fondo

length | % | auto | cover | contain

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: no-repeat;
     background-position:right top; 
     background-size:300px 150px;
 }
https://codepen.io/edisonrodriguezvelez/pen/dyMMeZE

background-attachment propiedad establece si una imagen de fondo se desplaza con el resto de

la página o es fija.

scroll|fixed|local|initial|inherit;

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: no-repeat;
     background-attachment:fixed; 
 }
https://codepen.io/edisonrodriguezvelez/pen/gOrrzvP

body{
     background-image:url(http://bestanimations.com/Nature/Flora/Trees/tree-
animated-gif-5.gif); 
     background-repeat: no-repeat;
     background-attachment:scroll; 
 }
https://codepen.io/edisonrodriguezvelez/pen/abNNGGP

background-origin propiedad especifica la posición de origen (el área de posicionamiento de

fondo) de una imagen de fondo.

border-box | padding-box | content-box | initial

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin

display La propiedad especifica el comportamiento de visualización (el tipo de cuadro de

representación) de un elemento.

none | inline | block | inline-block | flex | inline-flex | grid | inline-grid | contents | list-item |
run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-
group | table-row | table-column-group | table-column | table-cell | table-caption | ruby |
ruby-base | ruby-text | ruby-base-group | ruby-text-group

https://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=contents

display : inline;

.lol{
     width: 150px;
     height: 150px;
     background-color: dodgerblue;
 }
.lol1{
     width: 150px;
     height: 150px;
     background-color: dodgerblue;
     display: inline;
 }
https://codepen.io/edisonrodriguezvelez/pen/PoNNrpy

display none

p{
     width: 150px;
     height: 150px;
     background-color: red;
     display: none;
 }
https://codepen.io/edisonrodriguezvelez/pen/MWyyMBe
display : block

.lol1{
     width: 150px;
     height: 150px;
     background-color: dodgerblue;
 }
.lol2{
     width: 150px;
     height: 150px;
     background-color: red;
     display: block;
 }
https://codepen.io/edisonrodriguezvelez/pen/eYZZwRZ

display inline-block

p{
     width: 150px;
     height: 150px;
     background-color: red;
     display: inline-block;
 }
https://codepen.io/edisonrodriguezvelez/pen/zYqqVRZ

padding

padding-top | padding-right |padding-bottom | padding-left

padding-bottom

length | %

padding-left

length | %
padding-right

length | %

padding-top

length | %

Border

border | border-width | border-style | border-color

margin

margin-top |margin-right | margin-bottom | margin-left

float

left | right | none

height

auto | length | %

max-height

none | length | %

max-width

none | length | %

min-height

none | length | %
width

auto | % | length

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;