A stylesheet is a CSS file that controls how HTML is rendered. In ASP.NET Core applications, place stylesheets under wwwroot/css and reference them with a link element; static-content handling maps the URL without including wwwroot. section 3.2.9
Use stylesheets to change presentation without mixing visual rules into application logic:
- Style validation output by targeting classes such as input-validation-error, field-validation-error, and validation-summary-errors generated by helper attributes. section 3.2.9
- Load a shared framework stylesheet from a Razor layout so every view using that layout can use its classes. section 7.5.2
- Keep presentation choices out of reusable tag-helper C# code by passing CSS class values through HTML attributes. section 7.5.2
Highlighting invalid form fields
A stylesheet can make server-generated validation state visible: set .input-validation-error to a red border and pale background, color .field-validation-error red, and hide valid validation elements. Link /css/styles.css from the form view; the wwwroot directory is omitted from the URL. section 3.2.9
Listing 3.20 The contents of the styles.css file in the wwwroot/css folder
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
Browse the complete validation stylesheet, including valid-state hiding, invalid-field borders, and validation-summary formatting. section 3.2.9
