コードはCodepenでは動作しますが、ブラウザでは機能しません。

Question

私はコーディングに全く新しいので、私と穏やかにしてください！私はボタンにCSSコードを追加しようとしていますが、それをCodepenでテストしていますが、ブラウザで試してみるとハイパーリンクが表示され、コードが表示されます。

<a href="index.html" class="button">Home</a> 

     .button 
     {padding: 10px 24px; 
     font-family: trebuchet; 
     Color: #E8DCEC; 
     Background-color: #ed1c24; 
     text-align: center; 
     display: inline-block; 
     font-size: 16px; 
     border: 2px solid #8b52a1; 
     border-radius: 4px;} 

     .button:hover { 
     background-color: #72bf44 
     color: #E8DCEC; } 

私はここに完全に何かを明らかに見逃している確信しているが、私はそんなにその上に見てきたと私は

Answer 1

CSSコードは<style>にする必要がありますまたはリンクされたものを見ることができません

<a href="index.html" class="button">Home</a> 
 
<style> 
 
.button { 
 
    padding: 10px 24px; 
 
    font-family: trebuchet; 
 
    Color: #E8DCEC; 
 
    Background-color: #ed1c24; 
 
    text-align: center; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    border: 2px solid #8b52a1; 
 
    border-radius: 4px; 
 
} 
 

 
.button:hover { 
 
    background-color: #72bf44 color: #E8DCEC; 
 
} 
 
</style>