Differenciate between different .CSS? - css

Question

My problem is that I have in my code the following .CSS for the structure "form":
form, .content {
font-family: Arial, Helvetica, sans-serif; /*Not yet a member? Sign up*/
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #595959; /*Border register*/
background: white;
/*border-radius: 0px 0px 10px 10px;*/
}
But I would like it to be different for the button I have (I don’t want a border with a width):
<form action="#" method="post">
<input type="hidden" id="hiddenfield" name="hiddenfield">
<button class="button" name="search">Search</button>
</form>
I would want it to be with these characteristics:
.button {
display: block;
margin: auto;
border: none;
color: black;
padding: 8px 40px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
button:hover {
background:#333333;
color: white;
}
However, the .CSS of the structure is also applied to the button. I would like to differentiate it, but I do not know how. I have tried in several ways, including:
form, .button {
display: block;
margin: auto;
border: none;
color: black;
padding: 8px 40px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
Could you help me?
Thank you
The image of the button is here:

Answer 1

You need to know weights of elements in css
element (span, input, form...) = 1
class (.my-class) = 10
id (#my-id) = 100
attribute (style="color:red") = 1000
form, .button { - style for form and button (separate)
form .button { - style for only button (weight 1 + 10 = 11)
form button.button { here you can override previous styles for element .button (weight 1 + 1 + 10 = 12)
form {
border: none !important;
}
In your case not input has border, but form