/* Use the below to set a style for a particular html element*/
/* refer to the box model to undersstand padding, border, margin*/
h1 {
  font-family: helvetica;
  border: 2px solid black;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  background-color: coral;
  text-align:center;
}

body {
  margin: 0 auto;
}

/*Use the below to style a class*/

.title {
     color:teal
   }
/*Add the .uppercase class to any html class e.g. <p class= 'uppercase title' to
apply both styles*/

.uppercase {
  text-transform:uppercase;
}

/*Add the below to style an element with the article-title ID
classes style many elements, IDs style one element.
but IDs override classes and tags*/
#article-title{
  font-family:cursive;
  text-transform:capitalize;
}

/*this chains styles so that only h2 w/
 class of destination will be applicable*/
h2.destination{
  font-family:cursive;
}

/*There is an order to chaining. The above is for
description class in h2s, but the below is for h5s within
description classes*/
.description h5{
  color:teal;
}

/*!important overrides all Id, class, html elements*/
.description h5{
  color:teal !important;
}
/*This factors repetitive code and puts all h5 and p elements w/ georgia*/
h5, p{
  font-family:Georgia;
}