How to select a scope in a div?


I'm having an issue coloring a span with css. Everything is working fine on the webpage however when I try to select a span in a div it doesn't work. Am I missing something dumb here?

<!doctype html>
    <link href="style/mainstyle.css" rel="stylesheet" type="text/css">
    <script src=></script>



        <div class = "tab1 triad">
            <script src="primejs.js"></script>

            <span class="red"><h2>Type in a number and I'll check if it is prime:</h2></span>

            <input class = "primeNum" type = "text">
            <button class = "submit">Submit</button>

            <span class = "result">
                <h2>What I found: <span class = "answer">?</span></h2>

and here is the css:

.tab1 {
    color: RED;
    font-size: 100;

Cleaned up your HTML, you had a some stray and missing tags.

Bin demo

<div class="tab1 triad">
  <span class="red">
    <h2>Type in a number and I'll check if it is prime:</h2>

  <input class="primeNum" type="text">
  <button class="submit">Submit</button>

  <span class="result">
    <h2>What I found: <span class="answer">?</span></h2>

And your css was missing the px after 100

.tab1 {
  color: red;
  font-size: 100px;