Interactive online courses HTML Academy
2026-03-09 10:46 Diff
https://htmlacademy.org/courses/html-css-basics/css-essentials/css-property-conflict

We’ve seen that a single element’s final styling can be derived from several CSS rules. If the same properties are assigned different values by these rules, then a conflict arises. For example:

ul { list-style: disc; } /* Browser styles */ .blog-navigation ul { list-style: none; } /* Our styles */

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.

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:

  1. The priority levels of the style files that contain conflicting properties are compared. For example, custom styles (that is, the ones we created) are given priority over browser ones.
  2. The specificity of the selectors for CSS rules with conflicting properties is compared. For example, the class selector is more specific than the tag selector.
  3. The property that is located lower in the code wins.

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.

There was another conflict with the .skills dd rule when margin-bottom appeared there:

margin: 0; margin-bottom: 10px;

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:

margin-left: 0; /* From a composite property */ margin-top: 0; /* From a composite property */ margin-right: 0; /* From a composite property */ margin-bottom: 0; /* From a composite property */ margin-bottom: 10px;

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 that we are already familiar with is best suited for this. The original styles for the scales have already been prepared.