how to debug css for a form

Hello,

I am having problems formatting a form using CSS. I am not a CSS expert. I have added the following to my custom css on the site:

div.wpforms-container-full .wpforms-form-5540 .wpforms-field.wpforms-field-textarea textarea {
background-color: #000;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 120px;
width: 100%;
line-height: 1.3;
}

The identifier of the form is: 5540.

I am trying to control the color of the text within a paragraph box on the form. However, setting the color attribute in the above CSS to any value has no effect. It appears as a faded gray that is almost unreadable. I am using the Enfold theme.

Would someone provide some guidance how to debug this problem? When I look at the html/css arriving at my browser, it appears that the above CSS is not over-riding the Enfold theme CSS. However, as I said, I am not a CSS expert and I don’t really know how to figure out what is the problem.

Note: I have added other CSS that controls other aspects of the form, so I am sure the CSS being properly applied to the form.

Thanks.