Basic CSS

Screencasts to go along with the 'Basic CSS' challenges on freeCodeCamp.org.
    <h2>CatPhotoApp</h2>
    <main>
      <p style="color: blue;">Click here to view more <a href="#">cat photos</a>.</p>
      
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      
      <div>
        <p>Things cats love:</p>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <p>Top 3 things cats hate:</p>
    <style>
        h2 {color: red;}    
    </style>
    
    <h2>CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#">cat photos</a>.</p>
      
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      
      <div>
        <p>Things cats love:</p>
        <ul>
          <li>cat nip</li>
    <style>
      .red-text {
        color: red;
      }
    </style>
    
    <h2 class="red-text">CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#">cat photos</a>.</p>
      
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      
      <div>
        <p>Things cats love:</p>
    <style>
      .red-text {
        color: red;
      }
    </style>
    
    <h2 class="red-text">CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#">cat photos</a>.</p>
      
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      
      <div>
        <p>Things cats love:</p>
    <style>
      .red-text {
        color: red;
      }
      p {
        font-size: 16px;
      }
    </style>
    
    <h2 class="red-text">CatPhotoApp</h2>
    <main>
      <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
      
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
    <style>
      .red-text {
        color: red;
      }
    
      p {
        font-size: 16px;
        font-family: monospace;
      }
    </style>
    
    <h2 class="red-text">CatPhotoApp</h2>
    <main>
      <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    
    <style>
      .red-text {
        color: red;
      }
    
      p {
        font-size: 16px;
        font-family: monospace;
      }
      
      h2 {
        font-family
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster;
      }
    
      p {
        font-size: 16px;
        font-family: Helvetica, monospace;
      }
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
      }
    
      p {
        font-size: 16px;
        font-family: monospace;
      }
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .thick-green-border {
        border-color: green;
        border-width: 10px;
        border-style: solid;
      }
        
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
      }
    
      p {
        font-size: 16px;
        font-family: monospace;
      }
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
      }
    
      p {
        font-size: 16px;
        font-family: monospace;
      }
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
        background-color: blue;
      }
    
      p {
        font-size: 16px;
        font-family: monospace;
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
      }
    
      p {
        font-size: 16px;
        font-family: monospace;
      }
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      #cat-photo-form {
          background-color: green;
      }
      
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
      }
    
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <style>
      [type='checkbox'] {
          margin: 10px 0px 15px 0px;
      }
        
      .red-text {
        color: red;
      }
    
      h2 {
        font-family: Lobster, monospace;
      }
    
    <style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
    
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
    
      .yellow-box {
    <style>
    
    </style>
    <style>
      body {
        background-color: black;
      }
    
    </style>
    
    
    <style>
      body {
        background-color: black;
        font-family: monospace;
        color: green;
      }
      
      .pink-text {}
    </style>
    <h1>Hello World!</h1>
    <style>
      body {
        background-color: black;
        font-family: monospace;
        color: green;
      }
      .blue-text {
        color: blue;
      }
      .pink-text {
        color: pink;
      }
    
    </style>
    <style>
      body {
        background-color: black;
        font-family: monospace;
        color: green;
      }
      #orange-text {
        color: orange;
      }
      .pink-text {
        color: pink;
      }
      .blue-text {
        color: blue;
    <style>
      body {
        background-color: black;
        font-family: monospace;
        color: green;
      }
      #orange-text {
        color: orange;
      }
      .pink-text {
        color: pink;
      }
      .blue-text {
        color: blue;
    <style>
      body {
        background-color: black;
        font-family: monospace;
        color: green;
      }
      #orange-text {
        color: orange;
      }
      .pink-text {
        color: pink;
      }
      .blue-text {
        color: blue;
    <style>
      body {
        background-color: black;
      }
    </style>
    <style>
      .red-text {
        color: #FF0000;
      }
      .green-text {
        color: #00FF00;
      }
      .dodger-blue-text {
        color: #1E90FF;
      }
      .orange-text {
        color: #FFA500;
      }
    </style>
    <style>
      .red-text {
        color: #F00;
      }
      .fuchsia-text {
        color: #F0F;
      }
      .cyan-text {
        color: #0FF;
      }
      .green-text {
        color: #0F0;
      }
    </style>
    <style>
      body {
        background-color: rgb(0, 0, 0)
      }
    </style>
    <style>
      .red-text {
        color: rgb(255, 0, 0);
      }
      .orchid-text {
        color: rgb(218, 112, 214);
      }
      .sienna-text {
        color: rgb(160, 82, 45);
      }
      .blue-text {
        color: rgb(0, 0, 255);
      }
    </style>
    <style>
      .penguin {
        
        /* change code below */
        --penguin-skin: gray;
        --penguin-belly: white;
        --penguin-beak: orange;
        /* change code above */
        
        position: relative;
        margin: auto;
        display: block;
        margin-top: 5%;
        width: 300px;
    <html>
        <head></head>
        <body>
            
        </body>
    </html>
    <style>
      .penguin {
        --penguin-skin: gray;
        position: relative;
        margin: auto;
        display: block;
        margin-top: 5%;
        width: 300px;
        height: 300px;
      }
      
      .penguin-top {
        top: 10%;
        left: 25%;
    <style>
      .penguin {
        --penguin-skin: gray;
        --penguin-belly: white;
        --penguin-beak: orange;
        position: relative;
        margin: auto;
        display: block;
        margin-top: 5%;
        width: 300px;
        height: 300px;
      }
      
      .penguin-top {
    <style>
      :root {
        
        /* add code below */
        
        /* add code above */
      }
      
      body {
        background: var(--penguin-belly, #c6faf1);
      }
      
      .penguin {
        --penguin-skin: gray;
    <style>
      :root {
        --penguin-skin: gray;
        --penguin-belly: pink;
        --penguin-beak: orange;
      }
      
      body {
        background: var(--penguin-belly, #c6faf1);
      }
      
      .penguin {
        
        /* add code below */
    <style>
      :root {
        --penguin-size: 300px;
        --penguin-skin: gray;
        --penguin-belly: white;
        --penguin-beak: orange;
      }
      
      @media (max-width: 350px) {
        :root {
          
          /* add code below */
          --penguin-size: 200px;
          --penguin-skin: black;