<!DOCTYPE html>
    <!-- It's a best practice to always declare your document! -->
<html lang="en">
  <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Main Title</h1>
    <p>In unit 2.3, we defined a CSS selector as the portion of the CSS rule that tells the browser on which HTML element to apply the defined style.

When your HTML is simple, the selectors can be simple as well. The most basic selectors simply mirror the HTML tag. For example "p" attaches to all &lt;p&gt; tags, "img" will attach to all &lt;img&gt; tags and so on. As you can imagine, there will often be times when you don't want every single HTML element of a particular type to have identical style. In Module 3, we'll discuss a variety of ways to use selectors to attach to specific HTML elements. 

In unit 2.2, we briefly mentioned the fact that properties apply to the entire hierarchy of HTML elements to which they are attached. This means that you will have to be very careful which selectors you choose to use in combination with your chosen style. When choosing your selector you might want to keep the following aspects of an HTML element in mind</p>
    <h2>Sub Title 1</h2>
    <ul>
      <li>How many of these HTML elements are on my page?</li>
      <li>Do I want this style to apply to every one of these elements?</li>
      <li>What are this HTML element's children</li>
    </ul>
    <h2>Sub Title 2</h2>
    <ol>
      <li> and do I want this style to apply to them as well?</li>
      <li>Is this element a block element or an inline element</li>
      <li>and does this style make sense in that context?</li>
    </ol>
  </body>
</html>
/*selector here*/    {
  background-color: #ccffcc;
  color: #336600;
}

 /*selector here*/   {
  background-color: #336600;
  color: #ccffcc;
}

/*selector here*/    {
  border: 3px solid;
}

 /*selector here*/   {
  background-color: #ffff99;
}

 /*selector here*/   {
  text-decoration: underline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.