<article id="mainContent">
  <h2 class="articleTitle">Article Title</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores accusamus reprehenderit facilis vitae at <a href="https://developer.mozilla.org/">voluptatem corrupti</a> illo amet quo. Eligendi officiis itaque quasi placeat molestiae, nostrum magnam dolorem blanditiis laboriosam?</p>
  <h3>Sub Title</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dolore adipisci repellendus vel. Eligendi fugiat nisi saepe officiis? <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#selectors">Voluptate quisquam</a> cumque atque, error delectus perferendis doloribus sed aliquam aut autem.</p>
  
</article>

<aside>
  <h2>Aside Title</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem deleniti tempore, mollitia perferendis beatae saepe, at, distinctio sit vero quos nesciunt quaerat! Quisquam non temporibus similique harum, dolorum soluta. Repellat!</p>
</aside>

/* Universal Selector */
/* This example selects all elements on the page */
*{
  padding: 1rem;
  font-family:sans-serif;
}


/* Type Selector */
/* This example selects all p elements on the page */
p{
  color: darkgrey;
}


/* Class Selector */
/* This example selects all elements with a class of articleTitle on the page */
.articleTitle{
  color: purple;
}


/* ID Selector */
/* This example selects all elements with an ID of mainContent on the page */
#mainContent{
  color: blue;
}

/* Attribute Selector */
/* This example selects all elements on the page that have the word Reference in their href attribute (it is case sensitive) */
a[href*="Reference"] {
  color:orange;
}