Font not applying to webpage-CodePudding

I am working on an HTML quiz project and I have a problem. My font is not applying to the paragraph.

CSS code for paragraph:

p {
     font-family: 'Courier';
     font-size: 2em;
     color: #FFF;
}

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Quiz</title>
</head>
<body>
    <h1>Quiz!</h1>
    <div>
    
        <p, id="question">question?</p>
        <button, id="OK-button">OK</button>
    </div>
</body>
</html>

<script src="main.js"></script>

CodePudding user response：

Look at the p and button tags, you don't have to put a comma <p id="question">question?</p> <button id="OK-button">OK</button>

CodePudding user response：

Your HTML is invalid. You can validate that by pasting it into https://validator.w3.org/#validate_by_input Do that for insight into all your errors. Here is a high level summary:

Html element markup cannot contain a comma like <button,
Script (and all elements) must appear inside the HTML
Best practice is to place the <script> element inside the <body> at the end Example:

   <script>alert("going well");</script>
</body>
</html>

Default background is white on many browsers so you may not see your text unless the container has another background color other than white #fff;

When you specify a font it is best practice to include the generic; in this case monospace Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

.container {
  background-color: #222277;
  color: yellow;
  font-size: 0.75rem;
  font-family: arial, sans-serif;
  padding: 1rem;
  text-align: center;
}

.bigger {
  font-size: 2.5em;
}

p {
  font-family: Courier, monospace;
  font-size: 2em;
  color: #FFF;
}

<div ><span >Here it is a serif font.</span>
  <p>What is this my good friends? I am Courier monospace</p>
  <p>the quick brown fox jumps over the lazy dog</p>
  <p>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</P>
  <p>1 2 3 4 5 6 7 8 9 0 !@#$%^&*()</p>
</div>