Review the CSS stylesheet below:
#start_experiment_button
{
display: inline-block;
color: black;
border: 3px outset gray;
background-color: #CCCCCC;
padding: 8px;
text-decoration: none;
font-family: Arial, Helvetica;
font-weight: bold;
}
#start_experiment_button:hover
{
border: 3px inset gray;
}
#start_experiment_button:active
{
border: 3px inset gray;
}
#start_experiment_button
{
display: none;
}
Take note that the display property of #start_experiment_button appears twice. Is there a specific reason for this? Does the second definition simply overwrite the first one, making the first redundant? Or do the intermediate definitions for hover and active somehow impact when the two display values actually apply?