How can you override inline styles with external CSS?

Instruction: Describe the method to override inline styles.

Context: This question tests the candidate's knowledge of CSS specificity and the techniques to override inline styles using external stylesheets.

Official answer available

Preview the opening of the answer, then unlock the full walkthrough.

To begin with, it's essential to clarify that inline styles added directly to an HTML element have a higher specificity compared to styles defined in external or internal stylesheets. This means that, by default, inline styles will take precedence over CSS rules defined elsewhere.

However, there are strategic ways to override these inline styles using external CSS. The key here is to increase the specificity of the external CSS selector to match or exceed that of the inline style. One common method involves using the !important declaration. Though its use is generally discouraged due to maintainability concerns, it's a powerful tool in a developer's arsenal when used judiciously. For example:...

Related Questions