Sobes.tech
Interview Help
Resources
Interview Preparation
Resources
Job Search
Resources
Legal
Back to questions
Junior

What are built-in styles and what is their priority?

sobes.tech AI

Answer from AI

Inline styles are styles directly applied to an HTML element using the style attribute.

<p style="color: red;"> This text will be red </p>

The priority of inline styles is the highest among all methods of applying styles in CSS. They override styles from external style sheets (.css files), styles from <style> blocks in <head>, and inherited styles from parent elements. The exception is rules with the !important flag.

Example of priority (from highest to lowest, with equal specificity):

  1. Rules with !important (not recommended to use).
  2. Inline styles (style attribute).
  3. External style sheets (<link rel="stylesheet">).
  4. Internal styles (<style> block in <head>).
  5. Inherited styles.
  6. Browser default styles.

Inline styles have a specificity equivalent to an ID selector (#id).

The main disadvantage of inline styles is low maintainability. They complicate centralized style management, make refactoring difficult, and lead to code duplication. Therefore, their use is generally recommended to be limited, for example, to temporary debugging styles or in components where styles are dynamically computed and bound to specific elements.

PreviousNext