0
0
CSSmarkup~5 mins

Inline vs external precedence in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

We use CSS to style web pages. Sometimes, styles come from different places. Knowing which style wins helps us control how the page looks.

You want to quickly change the color of a single button without editing the main style file.
You have a big website with many pages and want to keep styles organized in one file.
You need to fix a style on one element that is not changing as expected.
You want to understand why some styles are not applying as you thought.
Syntax
CSS
/* External CSS example */
button {
  color: blue;
}

<!-- Inline CSS example -->
<button style="color: red;">Click me</button>

External CSS is written in separate files or inside <style> tags.

Inline CSS is written directly inside an element's style attribute.

Examples
This button uses inline style to make text red.
CSS
<button style="color: red;">Red Button</button>
This style makes all buttons blue unless overridden.
CSS
/* In external CSS file or &lt;style&gt; tag */
button {
  color: blue;
}
Inline style color: red; wins over external color: blue;.
CSS
<button style="color: red;">Red Button</button>

/* External CSS */
button {
  color: blue;
}
Sample Program

The first button uses the external CSS color blue. The second button uses inline CSS color red, which overrides the external style.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Inline vs External CSS</title>
  <style>
    button {
      color: blue;
      font-size: 1.5rem;
      padding: 0.5rem 1rem;
    }
  </style>
</head>
<body>
  <button>External Blue Button</button>
  <button style="color: red;">Inline Red Button</button>
</body>
</html>
OutputSuccess
Important Notes

Inline styles have higher priority than external styles.

Use inline styles sparingly to keep your code clean and easy to maintain.

External styles are better for styling many elements consistently.

Summary

Inline CSS overrides external CSS for the same property on an element.

External CSS is good for consistent styling across many elements.

Use inline CSS only for quick, specific changes.