Tipos de selectores

/* Selector universal */
* {
border: 1px solid red;
margin: 10px;
}
/*selector de etiqueta */
header {
background: blue;
}

section {

background: purple;
}

/*selector descendente */

article h3 {
color: green;
}

/*Selectores de clase */

.title-a {
background: yellow;
}

.title-b {
background: salmon;
}

/* Selector de id */
#header {

border: 3px solid black;

}



#portada {
border: 3px solid ORANGE;
}

#guitarras {

border: 3px solid BROWN;
}

Animacion con Jquery

<div class="square"></div>

.square{
  width: 100px;
  height: 100px;
  background-color: blue;
  top:50px;
  position:relative;
}

$(".square").animate({
  width: "500px",
  top: "50px"
}, 1000, "easeInOutQuint");
/*
   Se debe agregar jquery UI
  swing
  easeInOutQuint
  easeOutElastic
  easeOutBounce
 
  */

Animación en un Botón

<button class="btn">Eses mi boton</button>

.btn{
  background-color: #600;
  color:white;
  bordwer:none;
  width: 200px;
  height; 40px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 14px;
  transition: all 1s; /*backgorind-color 1s*/
}

.btn:hover{
  background-color: #a30;
  font-size: 20px;
}