Let's read the exact same visual result written three different ways, and understand why each method looks the way it does.
Inline: <p style="color: #1E2A5A; font-family: sans-serif; font-weight: bold;">. Every single rule lives directly inside the style attribute, right on the tag, separated by semicolons. There's no selector needed because the tag IS the target but if you had 50 paragraphs, you'd have to repeat this entire string 50 times.
Internal: <style> p { color: #1E2A5A; font-family: sans-serif; font-weight: bold; } </style>, placed in the <head>, followed by a plain <p>Styled text</p> with no style attribute at all. Here, the selector p means 'every paragraph on this page' write the rule once, and it applies everywhere automatically. This is already far more reusable than inline.
External: the HTML file only contains <link rel="stylesheet" href="style.css"> plus a plain <p>. All the actual color/font rules live in a completely separate style.css file, using the exact same p { } syntax as internal CSS. The advantage over internal: this same style.css file could be linked from 100 different HTML pages, keeping every page's styling in perfect sync from one place.
All three produce IDENTICAL visual output the difference is entirely about reusability and organization, not appearance.