記事を書こうと考えた背景について

JavaScriptでTODOアプリを作成する前にhtmlとcssで画面の全体像を作成していて書いたcssが想定通りに表示されなかった為

cssが適用されなかったときのコードと実行結果
htmlファイル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
	<title>Snake Game</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="input-area">
	<input type="text"name="todo" placeholder="TODOを入力"/>
	<button>
	  追加
	</button>
	</div>
	<div>
        <p>未完了のTODO</p>
        <ul>
            <div>
            <li><p>TODOです</p>
                <button>完了</button>
                <button>削除</button>
            </li> 
            </div>   
        </ul>
    </div>
    <div>
        <p>完了のTODO</p>
        <ul>
            <div>
            <li><p>TODOでした</p>
                <button>戻す</button>
            </li> 
            </div>   
        </ul>
    </div>
	<script src="./JavascriptTodo/index.js"></script>
</body>
</html>

cssファイル

 body {
    font-family: sans-serif;
};
 .input-area{
    background-color: aqua;
}

cssが適用されなかった原因

{}の後に;をつけていたことによる文法ミス

正しくCSSが適用された時のコードと実行結果

※htmlファイルは上記と同じものを使用

CSSファイル

 body {
    font-family: sans-serif;
}
 .input-area{
    background-color: aqua;
}

実行結果

メモ
bodyの{}の後の；を削除した　

想定通りに実行されないときの考え方のフローについて

正しい文法で書かれているか
1行ずつコメントアウトして想定通り動かないもしくはエラーが出るところを突き止める
問題の場所を突き止めたらエラーの解決に向けて検索・コードの修正をする