Inline, Internal, and External CSS

CSS can be attached directly to an HTML element, embedded in a page, or loaded from a separate file.

Inline CSS lives in an element’s style attribute. Internal CSS is written inside a <style> element, normally in the HTML head. External CSS lives in a .css file connected with a <link rel="stylesheet" href="..."> element.

External stylesheets are generally the best choice for real projects because multiple pages can reuse the same design. Inline declarations have a different cascade priority than ordinary stylesheet declarations.

The style attribute affects this one heading.

HTML

<h3 style="color:#7c3aed; margin:0">Inline heading</h3>

CSS

/* No stylesheet rules yet. */

Rendered output

Observe: The heading appears purple even without a separate CSS rule.

A class rule provides a reusable design.

HTML

<h3 class="section-heading">Reusable heading</h3><p class="section-heading">Same class, same color.</p>

CSS

.section-heading { color: #0f766e; font-weight: 700; }

Rendered output

Observe: Both elements match one reusable rule. In a real project place it in a linked CSS file.

All three techniques create CSS declarations. Their location and cascade priority differ, but valid matched declarations style elements.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Do not place <link rel="stylesheet"> inside a CSS file; it is HTML.
• Avoid repeating many inline declarations if a reusable class expresses the design.

Create a file named styles.css containing the class rule, then link it from the HTML head and remove any duplicate inline color.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Prefer reusable external stylesheets for site-wide styles; use inline styles sparingly.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.