CSS.txt

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Getting started with CSS</title>
</head>

<body>

    <h1>I am a level one heading</h1>

    <p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="https://example.com">link</a>.</p>

    <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

    <ul>
        <li>Item <span>one</span></li>
        <li>Item two</li>
        <li>Item <em>three</em></li>
    </ul>

</body>

</html> 

<link rel="stylesheet" href="styles.css">

h1 {
  color: red;
}

p {
  color: green;
}

p, li {
    color: green;
}

li {
  list-style-type: none;
}

<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

.special {
  color: orange;
  font-weight: bold;
}

li.special {
  color: orange;
  font-weight: bold;
}

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

li em {
  color: rebeccapurple;
}

h1 + p {
  font-size: 200%;
}

a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p { ... }

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}