moved the css code to its own file using href="" (almost all symbols like

However when i move my css code back into the body in the html file (not using href="") the edits like padding, and color got applies to the frontend, here is my css code.

<style>
.subscribe-button {
background-color: rgb(204, 0, 0);
color:white;
border: none;
padding-top: 10px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
border-radius: 2px;
cursor: pointer;
margin-right: 5px;
margin-left: 10px;
transition: opacity 0.15s;
vertical-align: top;}
</style>

CodePudding user response：

It looks like you've accedentally copied css with html tags into your .css file. Make sure that the only code you have in .css file is the code between tags.

Style.css file contents should look like this.

  .subscribe-button {
    background-color: rgb(204, 0, 0);
    color:white;
    border: none;
    padding-top: 10px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 5px;
    margin-left: 10px;
    transition: opacity 0.15s;
    vertical-align: top;
  }
  .subscribe-button:hover {
    opacity:0.8;
  }
  .subscribe-button:active {
   opacity:0.4;
  }


  .join-button {
    background-color: rgb(255, 255, 255); 
    border: 1px solid #065fd4;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    padding-top: 9px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 9px;
  
    cursor: pointer;
    margin-right: 5px;
    transition: background-color .15s,
      color .15s;
    vertical-align: top;
    }

    .join-button:active {
      opacity: 0.7;
    }

    .join-button:hover {
    background-color: hwb(222 13% 3%);
    color:  rgb(255, 255, 255);
    }
  

  .tweet-button 
  {
    color:rgb(255, 255, 255);
    background-color: rgb(29, 155, 240);
    border-style: solid;
    border-color: rgb(3, 134, 216);
    border-width: 1px;
    padding-top: 7px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 7px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 15;
    transition: box-shadow .15s;
    vertical-align: top;
  }
  
  .tweet-button:hover {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.159);
   
  }

html file contents should look like this

<button > 
SUBSCRIBE
</button>

<button >
JOIN
</button>

<button >
Tweet
</button>

CodePudding user response：

It seems that you misunderstood how the .css file works. You shouldn't have any HTML tags in it (for example <div>). Here is how it should look like: https://www.webucator.com/article/how-to-create-a-css-external-style-sheet/ Use only selectors .div{} and the code inside them .div{color:red;}.