GTRONICK · October 26, 2020 23:15
diff --git a/index.html b/index.html
 <!DOCTYPE html> 
 <!--It's a best practice to always declare DOCTYPE!-->
 <html lang="en">
  <head>
    <title>Practice with Pseudoclass</title>
    <meta charset="utf-8">
  </head>
  <body>
      <h1>My Page</h1>
      <p>
        Pseudo-classes are a way to select HTML elements based on their state as opposed to their HTML structure. You can read more about pseudo-classes here.

  Pseudo-classes must always be applied to an existing selector. Their "flag character" is the colon (":"), as you can see used in the below examples. Here are some of the most popular pseudo-classes.
      </p>
      <p>
        your name: <input />
        <button>submit</button>
      </p>
      <p>
        These pseudo classes are the ones you are probably most familiar with. Even on this page you've probably noticed that links have different style than paragraph text. The a tag by default sets the text color to blue with an underline, but have you ever seen a purple link? This is the "visited" pseudo-class that applies a different style to links that the user has already clicked. The opposite of visited is "link" which is a link a user has not yet clicked. These two states are mutually exclusive, meaning a link cannot be both at the same time.
      </p>
      <ol>
        <li>The hover pseudo-class is applied when the user points at an object but doesn't activate it</li>
        <li>most commonly when they let their mouse cursor lay on top of an element without clicking</li>
        <li>Some form factors don't support this, such as touch devices or pen surfaces</li>
      </ol>
            <a href="https://www.edx.org/course/html5-introduction-w3cx-html5-0x-0">HTML Introduction</a>
      <br />
            <a href="https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-1">HTML5 Part 1</a>
      <br />
            <a href="https://www.edx.org/xseries/html5-w3c">HTML5 from W3C</a>
    </body>
 </html>
diff --git a/practice-with-pseudoclasses.markdown b/practice-with-pseudoclasses.markdown
diff --git a/style.css b/style.css
 body {
  background-color: #006666; 
  color: white;
 }
 h1 {
  text-decoration: underline;
 }
 input {
  border: 3px white solid;
 }
 input {
  border: 3px yellow solid;
 }
 input {
  background-color: yellow;
  border: 3px yellow solid;
 }
 button {
  background-color: white;
  color: #006666;
  border: 3px white solid;
 }
 button {
  background-color: #006666;
  color: white;
 }
 button {
  background-color: #33cc99;
 }
 li {
  background-color: white;
  color: #006666;
 }
 li {
  background-color: #33cc99;
  color: white;
 }
 a {
  color: white;
 }
 a {
  color: #33cc99;
 }
	<!DOCTYPE html>
	<!--It's a best practice to always declare DOCTYPE!-->
	<html lang="en">
	<head>
	<title>Practice with Pseudoclass</title>
	<meta charset="utf-8">
	</head>
	<body>
	<h1>My Page</h1>
	<p>
	Pseudo-classes are a way to select HTML elements based on their state as opposed to their HTML structure. You can read more about pseudo-classes here.

	Pseudo-classes must always be applied to an existing selector. Their "flag character" is the colon (":"), as you can see used in the below examples. Here are some of the most popular pseudo-classes.
	</p>
	<p>
	your name: <input />
	<button>submit</button>
	</p>
	<p>
	These pseudo classes are the ones you are probably most familiar with. Even on this page you've probably noticed that links have different style than paragraph text. The a tag by default sets the text color to blue with an underline, but have you ever seen a purple link? This is the "visited" pseudo-class that applies a different style to links that the user has already clicked. The opposite of visited is "link" which is a link a user has not yet clicked. These two states are mutually exclusive, meaning a link cannot be both at the same time.
	</p>
	<ol>
	<li>The hover pseudo-class is applied when the user points at an object but doesn't activate it</li>
	<li>most commonly when they let their mouse cursor lay on top of an element without clicking</li>
	<li>Some form factors don't support this, such as touch devices or pen surfaces</li>
	</ol>
	<a href="https://www.edx.org/course/html5-introduction-w3cx-html5-0x-0">HTML Introduction</a>
	<br />
	<a href="https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-1">HTML5 Part 1</a>
	<br />
	<a href="https://www.edx.org/xseries/html5-w3c">HTML5 from W3C</a>
	</body>
	</html>
	body {
	background-color: #006666;
	color: white;
	}
	h1 {
	text-decoration: underline;
	}
	input {
	border: 3px white solid;
	}
	input {
	border: 3px yellow solid;
	}
	input {
	background-color: yellow;
	border: 3px yellow solid;
	}
	button {
	background-color: white;
	color: #006666;
	border: 3px white solid;
	}
	button {
	background-color: #006666;
	color: white;
	}
	button {
	background-color: #33cc99;
	}
	li {
	background-color: white;
	color: #006666;
	}
	li {
	background-color: #33cc99;
	color: white;
	}
	a {
	color: white;
	}
	a {
	color: #33cc99;
	}