CSS Class Property not overwriting ASP - css

Question

I'm having an issue where I can't get the summary of a redgex to format how I want.
I have put the css classes within the same aspx file as the redgex summary and marked them as important. However still when I run it, it's not being used.
Update
Within Chrome's inspect element it's saying that the redgex summary style is red. The HedderText comes up red, it seems to be the list items that aren't following suit but I don't know why they're not overriding the default.
Any ideas?
Chrome showing it's not being used but don't know why:
CSS:
.valError {
color:red !important;
}
.validation_summary {
color:red !important;
}
ASP Redgex Summary:
<asp:ValidationSummary ID="ValidationSummary1"
runat="server"
ShowMessageBox="false"
ShowSummary="true"
ValidationGroup="v1"
ForeColor="Red"
DisplayMode="BulletList"
CssClass="valError"
HeaderText="<span>The below requires attention.</span>"/>

Answer 1

Without any styling applied, ValidationSummary renders as a boring list with error messages.
However, it’s easy to pretty it up with some CSS since it’s nothing more than a div with an unordered list inside.So you have to define in your example and the class .valError ul
Let's see it with an example:
<asp:ValidationSummary runat="server"
DisplayMode="BulletList"
CssClass="valError" />
Next, put it in a box with a red border
.valError{
border: 2px solid red;
color: red;
margin: 5px 0px;
padding: 15px;
}
Let's say we want padding and margins on the error list and move it to the right
.valError ul {
margin: 0;
padding: 0;
margin-left: 80px;
list-style: square;
}
Hope this helps!