HTML & CSS Interview Question #52

What are the different ways to apply CSS to an HTML page?

CSS Fundamentals, Selectors, Cascade, Specificity, Box Model, Units & Typography Mid-Level Intermediate

Quick Interview Answer

CSS can be applied as inline styles through the style attribute, as internal CSS inside a style element, or as an external stylesheet linked with a link element.

Detailed Explanation

CSS can be applied as inline styles through the style attribute, as internal CSS inside a style element, or as an external stylesheet linked with a link element.

External stylesheets are generally preferred for production websites because they improve reuse, maintainability, caching, and separation of concerns. Inline styles can be useful for specific dynamic cases but become difficult to maintain when used extensively.

Code Example

<!-- External stylesheet -->
<link rel="stylesheet" href="/css/site.css">

<!-- Internal CSS -->
<style>
    .card { padding: 1rem; }
</style>

<!-- Inline CSS -->
<div style="margin-top: 10px;">
    Content
</div>