Some styles don't work on CSS so I have to add them in HTML

Question

Have created a button in HTML and then added some style on it by CSS with some border effects and some others, but when i tried to change background color or the color of text it didn't worked and I had to do it by adding some style on HTML file. Does anyone knows why background and color couldn't be changed but other effects as border etc worked?

.button1 {
  float: none;
  height:20px;
  width:50px;
  background-color:blue;
  color:black;
  border-style: outset;
}

<hr>
<div class="button1">
  <button type="button" style="height:70px; width:230px; color:red; background-color: yellow">Click Here</button>
</div>

Button

Answer 1

In your code you set the color of the test to be red. Because it is "inline" on in the line of HTML it will override any css

<button type="button" style="height:70px; width:230px; color:red; background-color: yellow">Click Here</button>

if you remove the inline color: red you can now cast a color from your css. This is also why some effects worked and others did not - they are not predefined inline and only in your css class.

In short the order of casting goes inline > css

Answer 2

Target the button and style it.

//one out of many solutions: you can give the button an id
<button id="whatever">click here</button>

//then style it using the id

#whatever {
   background-color: yellow;
   color: red;
}