CSS float and text align works only as inline - html

Question

I have an app done with ASP .net core 2.1.
I modified it is scuffolded crud details page.
However I am stuck at dl,dt and dd elements.
The text in dt elements, which holds name of the fields are adjacent to the right side. and no matter what i did I couldn`t change it except I added and inline style code.
I put the code below at the style section of the file :
<style>
dd {
min-width: 120px;
background: #dd0
}
dt {
float: left;
background: #cc0;
text-align: left;
}
</style>
This code makes no changes in terms of float and text align, yet it does take effect for background as shown in picture below.
But When I put those display settings inline like below, it works just fine for those lines like in picture above.
<dt style="text-align: left; max-width: 70px;">
#Html.DisplayNameFor(model => model.PatientName)
</dt>
<dd>
#Html.DisplayFor(model => model.PatientName)
</dd>
<dt style="text-align: left;min-width: 70px;">
#Html.DisplayNameFor(model => model.PatientAddress)
</dt>
That made me think maybe it is a hierarchy of setting but I tried even the bootstrap and no luck again.
And I don`t want to put the settings inline as it is a bad practice.

Answer 1

CSS Specificity determines the order in which CSS rules get applied, so try adding selectors of increasing specificity until you get the desired result.
From the linked website:
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
Other rules:
Universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity.
(The selectors declared inside :not() do, however.)
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus
can be thought of as having the highest specificity.
The !important rule: When an !important rule is used on a style declaration, this declaration overrides any other declarations.
Here are examples of selectors based on the types listed above that you should try:
/* Type selectors (your current method): */
dd
dt
/* Class selectors (either directly on elements, or on parent <table class="my-table"> */
dd.my-class
dt.my-class
/* or */
table.my-table dd
table.my-table dt
/* ID selectors (either directly on elements, or on parent <table id="my-table"> */
dd.my-dd
dt.my-dt
/* or */
table#my-table dd
table#my-table dt
Like you mentioned, if all else fails you can resort to using bad practice methods that completely override all CSS selectors: inline styles or the !important rule:
<style>
dd {
min-width: 120px !important;
background: #dd0 !important;
}
dt {
float: left;
background: #cc0 !important;
text-align: left !important;
}
</style>