0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We’ve seen that a single element’s final styling can be derived from several CSS rules. If the<em>same properties</em>are assigned<em>different values</em>by these rules, then a conflict arises. For example:</p>
1
<p>We’ve seen that a single element’s final styling can be derived from several CSS rules. If the<em>same properties</em>are assigned<em>different values</em>by these rules, then a conflict arises. For example:</p>
2
ul { list-style: disc; } /* Browser styles */ .blog-navigation ul { list-style: none; } /* Our styles */<p>Styles with varying list-style property values can affect one and the same list in our blog. This presents a conflict, since, after all, a property can have only one value.</p>
2
ul { list-style: disc; } /* Browser styles */ .blog-navigation ul { list-style: none; } /* Our styles */<p>Styles with varying list-style property values can affect one and the same list in our blog. This presents a conflict, since, after all, a property can have only one value.</p>
3
<p>The browser needs to somehow decide what the final values of the conflicting properties will be. The conflict is resolved in a maximum of three steps. If the conflict cannot be resolved in the current step, then the process moves to the next step. Here are the steps:</p>
3
<p>The browser needs to somehow decide what the final values of the conflicting properties will be. The conflict is resolved in a maximum of three steps. If the conflict cannot be resolved in the current step, then the process moves to the next step. Here are the steps:</p>
4
<ol><li>The priority levels of the style files that contain conflicting properties are compared. For example,<i>custom</i>styles (that is, the ones we created) are given priority over browser ones.</li>
4
<ol><li>The priority levels of the style files that contain conflicting properties are compared. For example,<i>custom</i>styles (that is, the ones we created) are given priority over browser ones.</li>
5
<li>The<i>specificity</i>of the selectors for CSS rules with conflicting properties is compared. For example, the class selector is more specific than the tag selector.</li>
5
<li>The<i>specificity</i>of the selectors for CSS rules with conflicting properties is compared. For example, the class selector is more specific than the tag selector.</li>
6
<li>The property that is located lower in the code wins.</li>
6
<li>The property that is located lower in the code wins.</li>
7
</ol><p>Remember margin: 0; for .skills dd in the last step. The property from our styles conflicted with the property that was assigned by the browser’s default styles, but our rule has a higher priority and cancelled the browser’s default assigned margins.</p>
7
</ol><p>Remember margin: 0; for .skills dd in the last step. The property from our styles conflicted with the property that was assigned by the browser’s default styles, but our rule has a higher priority and cancelled the browser’s default assigned margins.</p>
8
<p>There was another conflict with the .skills dd rule when margin-bottom appeared there:</p>
8
<p>There was another conflict with the .skills dd rule when margin-bottom appeared there:</p>
9
margin: 0; margin-bottom: 10px;<p>The cascade also works inside CSS rules. Therefore, the “normal” margin-bottom as well as a similar component of the composite property were in conflict. The “normal” property won out because it is lower in the code:</p>
9
margin: 0; margin-bottom: 10px;<p>The cascade also works inside CSS rules. Therefore, the “normal” margin-bottom as well as a similar component of the composite property were in conflict. The “normal” property won out because it is lower in the code:</p>
10
<i>margin-left: 0;</i>/* From a composite property */<i>margin-top: 0;</i>/* From a composite property */<i>margin-right: 0;</i>/* From a composite property */<i>margin-bottom: 0;</i>/* From a composite property */ margin-bottom: 10px;<p>And now let’s turn our learning progress percentages into progress scales. To do this, you will have to add additional decorative wrappers to the markup, and the <div> tag<a>that we are already familiar with</a>is best suited for this. The original styles for the scales have already been prepared.</p>
10
<i>margin-left: 0;</i>/* From a composite property */<i>margin-top: 0;</i>/* From a composite property */<i>margin-right: 0;</i>/* From a composite property */<i>margin-bottom: 0;</i>/* From a composite property */ margin-bottom: 10px;<p>And now let’s turn our learning progress percentages into progress scales. To do this, you will have to add additional decorative wrappers to the markup, and the <div> tag<a>that we are already familiar with</a>is best suited for this. The original styles for the scales have already been prepared.</p>