Detailed explanation
Inline styles, internal stylesheets, and external stylesheets are three ways to provide CSS to a document. They use the same CSS property syntax, but differ in where declarations live, which elements they can target, and how easily they can be maintained and reused. These differences matter when choosing between a quick element-level adjustment, page-specific styling, and shared styling for a multi-page website.
Inline styles appear in an element’s style attribute, such as <p style="color: blue;">Inline</p>. Those declarations apply directly to that element, although inheritable properties such as color can also pass to its descendants. Inline styles do not contain selectors, so you cannot directly define :hover rules or media queries inside the attribute. Normal inline declarations outrank normal author stylesheet rules, even rules using ID selectors. However, saying inline styles always win is incorrect: an applicable author stylesheet declaration marked !important can override a normal inline declaration.
An internal stylesheet is written inside a <style> element, normally in the document’s <head>. For example, <style>.local { color: red; }</style> targets elements with class="local" in that document. It supports selectors, pseudo-classes, media queries, and other stylesheet features. It is useful for a standalone page or page-specific rules, but sharing it across pages requires duplication or a template that emits the CSS into each document. Internal CSS has no automatic priority over external CSS; competing declarations are resolved by the cascade, including importance, cascade layers, specificity, and source order.
An external stylesheet is a separate resource referenced with <link rel="stylesheet" href="styles.css">. The browser fetches it and applies matching rules to the document. Multiple pages can reference the same file, and HTTP caching can allow reuse without downloading it again, depending on cache headers. Inline and internal CSS can be cached as part of HTML, but not independently as stylesheet resources. External CSS is generally preferred for shared production styles because it centralises updates and separates presentation from markup. Interviewers expect these practical trade-offs, not just syntax definitions.
Key points to remember
- Inline CSS uses a style attribute and directly styles one element.
- Internal CSS uses a <style> element and targets matching elements within that document.
- External CSS uses a linked CSS file that can be shared across pages and cached independently.
- Normal inline declarations outrank normal author stylesheet rules, but do not override every declaration.
- Internal and external stylesheets follow the same cascade rules; neither has inherent priority.
Common mistakes candidates make
- Claiming inline styles always win, without considering !important or other cascade rules.
- Saying internal CSS always overrides external CSS, regardless of specificity and source order.
- Saying inline and internal CSS cannot be cached at all, rather than explaining that they are cached with the HTML.
Likely follow-up questions
If internal and external CSS both set the same property, which wins?
Their storage location does not decide the winner; the cascade does. If origin, importance, layer precedence, specificity, and scoping proximity are equal, the declaration appearing later in document-defined stylesheet order wins.
Can an external stylesheet override an inline style?
Yes: an external rule such as p { color: red !important; } can override style="color: blue;". However, an inline declaration that also uses !important outranks other author-important declarations for that property.
Are there valid reasons to use inline or internal CSS?
Yes: inline styles can supply element-specific values generated dynamically, while internal CSS can serve a standalone page or small critical style block. Shared styling is generally easier to maintain in an external stylesheet.
Interview tip: Compare location, reuse, caching, and cascade priority, then mention that external CSS is usually the best default for shared styles.