Hello Campers,
(Yes, another 5 mile long post by Aramini, one day soon after learning to code, I will take a business writing class to learn to be more concise… I promise! 
)
I am working on a personal project and I wanted to style some buttons with CSS. I have the issue resolved. But I have a question about the precedence of CSS with regards to the styling.
So say you have some buttons in a web application (the context is HTML, CSS, PHP, MySQL, so that is why the HTML attribute values are being escaped).
Code like this…(sample code, not necessarily the actual code)
<button type = \"button\" name=\"back\" value = \"Back\" onclick=\"history.back()\">Back</button>
<button type = \"button\" name = \"lastquery\" value = \"Last Query\" onclick = \" window.open('$url' , '_self');\">Last Query</button>
<button type = \"button\" name = \"edit\" value = \"Edit\" onclick = \"window.open('edit.php, '_self');\">Edit</button>
For some reason, if I add a class to buttons like that, the styling doesn’t take. Nor if the type="reset" or type="submit" does using a class or id selector seem to work in regard to the styling being applied.
I did get the styling to apply to the button elements defined by <button></button> tags by using this:
button {
display: inline-block;
margin: 10px 5px 10px 2px;
background-color: #12689B!important;
color: white;
border-radius: 5px;
/* box-shadow: 3px 3px darkgray; */
padding: 5px;
width: 100px;
font-weight: bold
}
but for the <input type="submit"... > and the <input type = "reset" ... >" buttons, I had to do this:
input[type=submit] {
display: inline-block;
margin: 10px 5px 10px 2px;
background-color: #12689B!important;
color: white;
border-radius: 5px;
padding: 5px;
width: 100px;
font-weight: bold
}
input[type=reset] {
display: inline-block;
margin: 10px 5px 10px 2px;
background-color: #12689B!important;
color: white;
border-radius: 5px;
padding: 5px;
width: 100px;
font-weight: bold
}
I “duckduckgoed/googled” for a while but could not find any explanation that satisfied me, just… “oh you have to do it like this” or very shallow tutorial style articles. I want to understand WHY the behavior. The MDN didn’t seem to explain it well either (unless I overlooked some web doc article).
Why is it that those type of buttons have to be done that way and styling doesn’t seem to work if you try to apply it via class or id? I have switched the order and played with internal <style></style> tags, but for whatever reason, those approaches did not work as expected.
I am aware of the CSS cascade priorities. But the above is the only CSS code regarding buttons in my linked stylesheet so I don’t get what the !@#% was overriding my styles.
